CKEditor中自定義自關閉標記的問題

Question

我有一個插件用於在文本中插入標簽<cut /> 。 它工作正常，結果可以預期，但在編輯器窗口<cut />轉換為<cut></cut> ，包含下面的段落並阻礙進一步編輯。

GIF - http://gyazo.com/dd7c36ba7cb7bc7cb00186cfb83e5fbc

任何想法如何解決它？

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

呃，我確信我在某些問題上已經徹底解釋了這一點，但我找不到它，所以這里有另一種解釋：D。

在嘗試編輯CKEditor中的非HTML標記之前，必須先了解兩個重要事實：

1. CKEditor是一個HTML編輯器。

   當然，自定義標簽在HTML中越來越受歡迎。 你也可以說XML是某種HTML的泛化（盡管不是很精確，因為它有其他規則），所以如果CKEditor處理HTML，為什么它不能同樣處理其他標記。 嗯 - 答案很簡單 - 因為HTML標簽有意義而CKEditor知道它。 但它不知道您的自定義標簽的含義。 標簽的含義（列表是什么，它有項目，它們是塊元素等）對於實現編輯算法至關重要。

   很公平，你可以說。 但是為什么CKEditor的配置（例如CKEDITOR.dtd對象）沒有概括，所以可以配置每個可能的標簽的含義？ 因為每次泛化都會增加復雜性，HTML編輯已經足夠復雜了。

   那么為什么CKEDITOR.dtd對象一直存在呢？ 因為CKEditor的某些組件在某種程度上是可配置的。 DTD對CKEditor的HTML解析器 （主要在數據處理期間使用）影響最大，因此這是最可配置的組件。 其他算法，如輸入鍵處理，退格/刪除，列表編輯（這是一項非常復雜的任務）只是稍微可配置，並且無法保證它們將與您的自定義標簽一起使用。

2. 編輯在瀏覽器中進行 ，部分由瀏覽器處理。

   這個事實非常重要，因為這意味着瀏覽器的功能也會影響CKEditor的限制。 瀏覽器必須能夠解析和呈現您的標簽（幸運的是，這部分在現代瀏覽器中運行得相當好 - IE8是最后一個存在巨大問題的部分）並且必須能夠編輯它。 這意味着 - 渲染插入符號，句柄選擇，處理退格鍵 ， 輸入等等。由於瀏覽器不易擴展且contentEditable的實現高度不一致，不兼容和錯誤，從發布到發布CKEditor會覆蓋越來越多的本機行為。 還不是全部（實際上 - 它永遠不會覆蓋所有，因為由於某些原因可能是災難性的），但是數量很大。 例如，所有的回車鍵行為都是自定義的，在Webkit和Blink CKEditor處理退格和刪除在許多情況下由於仍然未解決的錯誤（ 1和2 ），它實現了自己的撤銷系統，攔截粘貼和刪除的內容並執行自定義HTML插入（我記得當我們實施它時關閉了大量的門票）等等。

   小部件系統是確保一致，可配置和強大的編輯體驗的最大努力之一。 它內部充滿了黑客攻擊，但它為開發人員提供了一個干凈且功能強大的API ，並為最終用戶提供了非常一致的行為。 它允許實現“特殊的富內容單元，這些單元是在編輯器中被視為單個實體的元素組”。 因此，窗口小部件系統可以封裝部分內容並將其與瀏覽器隔離。

在這個簡短的介紹后，我終於可以回答你的問題。 您需要將<cut>標記實現為窗口小部件 。 您已經很好地配置了DTD（您只是忘記設置<cut>元素可以存在的元素以及它是否更像是塊或內聯元素），因此解析器將接受它並作為空標記處理。 現在你需要用一個小部件包裝它以隔離它，這樣它就不會破壞編輯體驗。 這應該夠了吧。