Problemi con un tag di chiusura automatica personalizzato in CKEditor

Question

Ho un plug-in per inserire il tag <cut /> nel testo. Funziona bene, il risultato è prevedibile, ma nella finestra dell'editor <cut /> si trasforma in <cut></cut>, avvolge i paragrafi seguenti e impedisce ulteriori modifiche.

GIF - http://gyazo.com/dd7c36ba7cb7bc7cb00186cfb83e5fbc

Delle idee come risolvere il problema?

CKEDITOR.plugins.add('pagecut', { 
lang: 'de,en,ru', 
onLoad: function(){ 
    var css = ('display:block;clear:both;width:100%;border-top:#999 1px dotted;padding:0;height:1px;cursor:default;'); 
    var cssBefore = (
      'content:"";' + 
      'background: url(' + CKEDITOR.getUrl(this.path + 'images/image.png') + ') no-repeat right center;' + 
      'height:14px;width:25px;position:relative;display:block;top:-8px;float:right;' 
     ); 
    CKEDITOR.addCss('cut{' + css + '} cut:before{' + cssBefore + '}'); 
}, 
init: function(editor) { 
    CKEDITOR.dtd['cut'] = {}; 
    CKEDITOR.dtd.$empty['cut'] = 1; 
    CKEDITOR.dtd.$nonEditable['cut'] = 1; 
    CKEDITOR.dtd.$object['cut'] = 1; 
    editor.addCommand('insertPagecut', { 
     exec: function(editor) { 
      var element = CKEDITOR.dom.element.createFromHtml('<cut />'); 
      editor.insertElement(element); 
     } 
    }); 

    editor.ui.addButton('Pagecut', { 
     label: editor.lang.pagecut.toolbar, 
     command: 'insertPagecut', 
     icon: this.path + 'images/icon.png', 
     toolbar: 'links' 
    }); 
} 
}); 

Answer 1

Uh, sono sicuro di averlo spiegato a fondo in qualche domanda, ma non riesco a trovarlo, quindi ecco un'altra spiegazione: D.

Ci sono due fatti importanti che si deve capire prima di tentare di modificare i tag non HTML in CKEditor:

1. CKEditor è un editor diHTML.

   Ovviamente i tag personalizzati iniziano ad essere sempre più popolari in HTML. Si può anche dire che XML è una sorta di generalizzazione dell'HTML (sebbene non precisamente, perché ha altre regole), quindi se CKEditor gestisce HTML perché non gestisce ugualmente bene altri tag. Bene, la risposta è semplice: perché i tag HTML hanno un significato e CKEditor lo sa. Ma non conosce il significato dei tuoi tag personalizzati. E il significato dei tag (che cos'è una lista, che ha elementi, che sono elementi di blocco, ecc.) È cruciale per implementare algoritmi di editing.

   Abbastanza corretto, si potrebbe dire. Ma perché la configurazione di CKEditor non è stata generalizzata (ad esempio l'oggetto CKEDITOR.dtd), pertanto è possibile configurare il significato di ogni possibile tag? Perché ogni generalizzazione aumenta la complessità e l'editing HTML è già abbastanza complesso.

   Quindi perché esiste l'oggetto CKEDITOR.dtd? Poiché alcuni componenti di CKEditor sono configurabili in una certa misura. Il DTD ha il maggiore impatto su CKEditor HTML parser (che viene utilizzato principalmente durante data processing), quindi questo è il componente più configurabile. Altri algoritmi, come il immettere la gestione delle chiavi, il backspace/delete, la modifica delle liste (che è un'attività molto complessa) sono solo leggermente configurabili e non c'è alcuna garanzia dato che funzioneranno con i tag personalizzati.

2. La modifica si verifica nei browser ed è parzialmente gestita dai browser.

   Questo fatto è importante perché significa che le capacità dei browser influiscono anche sui limiti di CKEditor. Il browser deve essere in grado di analizzare e rendere i tag (fortunatamente, questa parte funziona piuttosto bene nei browser moderni - IE8 è l'ultimo con enormi problemi) e deve essere in grado di modificarlo. Ciò significa - rendering cursore, gestire selezione, maniglia backspace, immettere, ecc Poiché i browser non sono facilmente estensibile e implementate su contentEditable sono altamente incoerenti, incompatibili e buggy, da rilascio a rilascio CKEditor sovrascrive sempre più di loro comportamenti nativi. Non ancora tutto (in realtà - non potrà mai scavalcare tutto, perché potrebbe essere disastroso per determinati motivi), ma una quantità significativa.Per esempio, tutte le immettere comportamento chiave è personalizzato, su Webkit e Blink CKEditor maniglie backspace e eliminare in molti scenari a causa ancora bug non risolti (1 e 2), che implementa il proprio sistema di annullamento, intercetta incollati e contenuto eliminato ed esecuzione di inserimenti HTML personalizzati (ricordo che quando l'abbiamo implementato questo ha chiuso un numero enorme di ticket) ecc.

   Uno dei maggiori sforzi per garantire un'esperienza di editing coerente, configurabile e potente è lo widgets system . È pieno di hack all'interno, ma espone uno API pulito e piuttosto potente allo sviluppatore e un comportamento molto coerente per l'utente finale. Permette di implementare "unità speciali di contenuto ricco che sono gruppi di elementi che sono trattati come una singola entità all'interno dell'editor". Quindi il sistema di widget ha il potere di incapsulare parte del contenuto e isolarlo dai browser.

Dopo questa breve introduzione posso finalmente rispondere alla tua domanda. È necessario implementare il tag <cut> come widget. Hai già configurato la DTD abbastanza bene (hai solo dimenticato di impostare in quali elementi l'elemento <cut> può esistere e se è più simile a un blocco o elemento in linea), quindi il parser lo accetterà e lo gestirà come un tag vuoto. Ora è necessario avvolgerlo con un widget per isolarlo in modo da non interrompere l'esperienza di modifica. Questo dovrebbe fare il trucco.