CKEditor 플러그인으로 생성 된 HTML을 고정하는 방법

Question

사용자 정의 CKEditor 플러그인을 사용하여 사용자 정의 span 태그를 생성하는 데 문제가 있습니다. 플러그인은 dataAttribute, dataValue 및 specificContent에 대한 사용자 입력을받습니다. 그런 다음 대화 상자의 onOk에 span 요소를 만들고 편집기에 추가합니다.

// Create the span element 
var span = new CKEDITOR.dom.element('span'); 
// Add the attributes to the span. 
span.data(dataAttribute, dataValue); 
span.setHtml(specificContent); 
// span.contentEditable = false; 
// Finally insert the element into the editor. 
editor.insertElement(span); 

// I have created a dummy element to place the cursor outside the actual span tag. 
var dummySpan = new CKEDITOR.dom.element('span'); 
dummySpan.addClass('dummy-span'); 
dummySpan.setText(' '); 

// after section dealing with editing a selected item, in "else": 
var sel = editor.getSelection(); // current cursor position 
editor.insertElement(span); // the real new element 
if(CKEDITOR.env.ie || CKEDITOR.env.webkit) { 
    dummySpan.insertAfter(span); 
    sel.selectElement(dummySpan); 
} 
else { 
    dummySpan.insertAfter(span); 
    var rangeObjForSelection = new CKEDITOR.dom.range(editor.document); 
    rangeObjForSelection.selectNodeContents(dummySpan); 
    editor.getSelection().selectRanges([ rangeObjForSelection ]); 
} 

코드가 제대로 작동하고 예상되는 마크 업이 생성되어 커서 위치에 삽입됩니다. 예 :

<span data-school='seven-high'>Seven High, Eleven</span> 
<span class='dummy'></span> 

문제는 플러그인 위젯을 계속 사용하는 경우입니다. 마크 업이 잘못되었을 수 있습니다. 커서가 span 태그 안에 배치 될 수 있기 때문입니다. 예를 들어 첫 번째 범위 내용을 삽입 한 후 커서가 span.dummy에있는 경우 공백을 추가 한 다음 두 번째 범위 내용을 추가하려고하면 공백이 span.dummy 안에 추가되고 두 ​​번째 범위 내용에 대해 잘못된 마크 업이 생성됩니다. 위의 대한

<span data-school='seven-high'>Seven High, Eleven</span> 
<span class='dummy'>&nbsp; 
    <span data-school='seven-high'>Seven High, Eleven</span> 
    <span class='dummy'></span> 
    <span data-school='seven-high'>Seven High, Eleven</span> 
    <span class='dummy'></span> 
</span> 

or 

<span data-school='seven-high'>Seven High, Eleven</span> 
<span class='dummy'>&nbsp; 
    <span data-school='seven-high'>Seven High, Eleven</span> 
    <span class='dummy'> 
    <span data-school='seven-high'>Seven High, Eleven</span> 
    <span class='dummy'></span> 
    </span> 
</span> 

예상 태그 :

<span data-school='seven-high'>Seven High, Eleven</span> 
<span class='dummy'></span> 
<span data-school='seven-high'>Seven High, Eleven</span> 
<span class='dummy'></span> 
<span data-school='seven-high'>Seven High, Eleven</span> 
<span class='dummy'></span> 

는 사용자가 CKEditor에 의해 생성 된 span 태그를 동결 CKEditor 생성 span 태그 즉, 내부에 커서를 배치 할 수 없을 것이라는 점을 확보하는 방법이 있나요 ?

참고 : 데이터 프로세서 인 dataFilter 및 htmlFilter도 사용하고 있습니다.

이것이 CKEditor 플러그인을 만드는 첫 번째 시도입니다 (Drupal WYSIWYG 용). 그래서이 문제에 대한 모든 해결책을 공개합니다. 참고 : 솔루션을 사용하여 예상대로 스팬 태그를 만들어야합니다.

Answer 1

IMO 새 편집기 span.dummy을 기존 편집기에 삽입하지 말고 편집기 내부의 일부 내용을 "고정"하지 않는 것이 좋습니다.

elements path과 함께 현재 선택 항목을 감지 할 수 있습니다. span.dummy 안에 있으면 기존의 앞뒤에 새로운 것을 삽입하십시오 - example.

당신이 정말로 컨텐츠를 고정 할 경우, 다음과 같은 요소에 [contenteditable=false] 속성을 추가 할 수 있습니다 또는 위젯으로 그들을 설정하는