나중에 FCKeditor 플러그인으로 "자리 표시 자"를 삽입하여 나중에 동적 내용으로 바꿉니다.

동적 내용의 자리 표시자를 HTML에 삽입하는 FCKeditor 용 플러그인을 작성하고 있습니다. 이 같은 인터페이스보기는 :나중에 FCKeditor 플러그인으로 "자리 표시 자"를 삽입하여 나중에 동적 내용으로 바꿉니다.

<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar">&nbsp;</div>

이 자리의 실제 삽입을 수행 내 플러그인에서 자바 스크립트의 조각이있다 :

Interface

현재 플러그인은 다음과 같은 HTML을 삽입

function insertNewDiv() { 
    var divNode = oEditor.FCK.EditorDocument.createElement('div'); 
    oEditor.FCK.InsertElement(divNode); 
    oEditor.FCK.Focus(); 
    oEditor.FCK.Events.FireEvent('OnSelectionChange'); 
    return divNode; 
}

FCKeditor 창에서보기 좋게하려면 FCKeditor 창에 CSS를 적용하고 거기에 제목을 기록 llowing : 유행에 따라 디자인 이외의

.dynamicelement:before { 
    content: attr(title); 
}

을 어쨌든는 FCKEDITOR는 윈도우의 다른 div 요소보다 더 다르게이 div 요소를 취급합니다. 이것은 나에게 좋지 않습니다.

나는이 자리는 다음과 같은 특성을 가질 필요가 다음 자리에 내용의

삽입이 허용되지 않습니다.
클릭하면 전체적으로 선택해야합니다.
삭제 키를 눌러 선택하면 삭제됩니다.
삭제할 수있는 유일한 방법은 그것을 선택하는 것입니다. 그런 다음 도구 모음 버튼을 클릭하여 편집 대화 상자를 엽니 다.
그것은 항상 블록 수준 요소
HTML 출력은 사용자 정의 태그 이름 또는하지 (대신 <div class="dynamicelement">의 <dynamicelement>)를 사용하는 경우 그것은 중요하지 않습니다 고려되어야한다.

FCKeditor API는 "div.dynamicelement 선택자와 일치하는 모든 요소를 다음과 같이 처리하십시오."같은 명령을 제공합니까? "?

또 다른 FCKeditor 플러그인이 있습니다. 내 연구에서 간과 한 것과 비슷한 것을합니다.

편집 : 그건 그렇고, 나는 이미 CKeditor에 대해 알고있다. 몇 가지 이유로 FCKeditor를 사용하고 있습니다. CMS를 사용하고있어 구성 옵션이 내 고객에게 적합합니다 (자리 표시자를 제외하고는 분명히).

출처

2011-02-27 mattalxndr

"페이지 나누기"버튼을 작동시키는 코드를 복제하여이 문제를 해결했습니다.

소스 코드를 살펴 보았을 때 FCKeditor에는 자리 표시자를 삽입하는 기본 방법이 있다는 것을 알았습니다.

"가짜 이미지"를 만들어 편집기 DOM에 삽입하십시오. 이미지를 원하는대로 스타일을 지정할 수 있습니다.
자바 스크립트를 사용하여 문제의 div에 연결하십시오.
div을 숨 깁니다 (여전히 소스와 출력에 표시됨).

WYSIWYG 모드에서이 위조 이미지로 놀고있어 변경 사항이 div으로 옮겨졌습니다.

이 작업을하기 위해 플러그인에 있어야하는 비트와 조각이 있습니다. grepFCK__PageBreak의 경우, 모든 소스에서 찾을 수 있으며, 플러그인에 복사 할 준비가되었습니다. FCK__PageBreak은 Page Break의 가짜 이미지의 클래스 이름입니다.

출처

2011-02-27 09:32:57 mattalxndr

편집기는 편집하거나 의견을 변경하는 동안 그대로 유지하기 위해 소스의 일부를 "보호"할 수있는 방법을 제공합니다 : 당신이 원하는 것을 얻을 ProtectedSource을 사용할 수. 구성 파일에서 "FCKConfig.ProtectedSource.Add"기능을 사용하십시오.

그러나 : 현재 에디터의 내용을 표시 "잠금"어떤 방법이 아니라고

참고. ProtectedSource로 보호 된 콘텐츠는 실제로 편집 중에 보이지 않습니다. 예를 들어 사용자 정의 비표준 태그 나 서버 측 스크립트를 보호하기 위해 대신 사용할 수 있습니다. 기본적으로 FCKeditor는이를 사용하여 < 스크립트 > 태그를 편집 중에 활성화하지 못하도록 보호합니다.

당신은 자리 표시 자 이미지와 함께이를 사용할 수 있습니다

귀하의 플러그인은 "진짜"보호 태그와 자리를 모두 추가합니다.
서버가 자리 표시자를 제거하고 실제 태그에 대한 작업을 수행합니다. 그러나 자리 표시자가 없지만 "실제"항목은 "실제"항목을 삭제합니다.
편집 할 때 서버는 브라우저에 정보를 보내기 전에 자리 표시 자 이미지를 삽입합니다.
- 플러그인은 당신의 선택의 특정 class 또는 가짜 속성으로 자리 표시 자 이미지를 삽입 : 당신이 간단한 kludge와 더 나을 수 있도록
는이 모든 조금 복잡한 것 같다.
이미지 플러그인을 조정하여 자리 표시자를 무시하십시오.
자리 표시 자 이미지를 서버의 실제 내용으로 바꿉니다.
내용을 편집 할 때 브라우저에 다시 보낼 때 실제 내용을 자리 표시 자 이미지로 바꾸십시오.

또는 자신의 사용자 정의 태그를 사용 (예 : <dynamicelement>) 다음 많은 상황에서 ProtectedTags:

를 사용할 수 있습니다, FCKEDITOR에서 소스보기로 전환하고 추가 할 수하는 것이 중요하다 몇 가지 커스텀 태그, 커스텀 처리에 필요한 것 등등. 문제는 브라우저가 비표준 HTML 태그를 처리하는 방법을 모르고 일반적으로 DOM 트리 (특히 IE)를 찾을 때 DOM 트리를 손상시키는 것입니다. 너무 더러운 해결하는데 투입없이 트릭을 할 수있다 (예를 들어 어떤 크기와 배경 이미지를) 잘 <dynamicelement>을 표시하는 일부 CSS와 결합

출처

2011-02-27 06:50:04

내 대답은 귀하의 제안이 아니지만, 내가 얻은 곳으로 가야한다는 귀하의 의견이 필요했습니다. 귀하의 제안에 감사드립니다. – mattalxndr

나중에 FCKeditor 플러그인으로 "자리 표시 자"를 삽입하여 나중에 동적 내용으로 바꿉니다.

답변

관련 문제