Wie Sie HTML einfrieren, das von CKEditor-Plugin erstellt wurde

Question

Ich habe ein Problem beim Erstellen von benutzerdefinierten span-Tag mit benutzerdefinierten CKEditor-Plugin. Das Plugin nimmt Benutzereingaben für dataAttribute, dataValue und specificContent. Dann unter onOk für den Dialog, ich ein span-Element erstellen und an den Editor anhängen.

// 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 ]); 
} 

Der Code funktioniert gut und das erwartete Markup wird generiert und an der Cursorposition eingefügt. Zum Beispiel:

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

Das Problem ist, dass auf die kontinuierliche Nutzung des Plugin-Widget. Das Markup kann sich als fehlerhaft erweisen. Dies liegt daran, dass der Cursor innerhalb des span-Tags platziert werden kann. Zum Beispiel: Nach dem Einfügen des ersten Bereichsinhaltes befindet sich der Cursor auf span.dummy, wenn ich ein Leerzeichen hinzufüge und dann versuche, den zweiten Bereichsinhalt hinzuzufügen, wird der Speicherplatz innerhalb der span.dummy hinzugefügt und das falsche Markup für den zweiten Bereichsinhalt generiert.

<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> 

Erwartete Markup für oben:

<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> 

Gibt es eine Möglichkeit zu sichern, dass der Benutzer nie in der Lage sein, die Cursor in dem CKEditor erstellt span-Tag zu legen, dh den Span-Tag von CKEditor erstellt einfrieren ?

Hinweis: Ich verwende auch Datenprozessoren: dataFilter und htmlFilter.

Dies ist mein erster Versuch, ein CKEditor-Plugin (für Drupal WYSIWYG) zu erstellen. Also bin ich offen für die Lösung dieses Problems. Hinweis: Die span-Tags sollten mit der Lösung wie erwartet erstellt werden.

Answer 1

IMO wäre es besser zu verbieten neue span.dummy in bereits bestehenden, nicht um einige Inhalte im Editor "einzufrieren".

Sie können mit elements path feststellen, in welchem ​​Element die Auswahl aktuell ist. Wenn es innerhalb span.dummy ist, fügen Sie einfach ein neues vor/nach dem vorhandenen ein - example.

Wenn Sie wirklich Inhalt fixieren möchten, dann können Sie versuchen, [contenteditable=false] Attribut auf solche Elemente hinzuzufügen, oder sie in Widgets drehen