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 解析器（主要在数据处理过程中使用）影响最大，因此这是最可配置的组件。其他算法，如enter按键处理、退格/删除、列表编辑（这是一项非常复杂的任务），仅可稍微配置，并且不能保证它们能够与您的自定义标签一起使用。

2. 编辑发生在浏览器中，并且部分由浏览器处理。

   这一事实很重要，因为它意味着浏览器的功能也会影响 CKEditor 的限制。浏览器必须能够解析和渲染您的标签（幸运的是，这部分在现代浏览器中工作得相当好 - IE8 是最后一个存在巨大问题的浏览器）并且必须能够对其进行编辑。这意味着 - 渲染插入符号、句柄选择、句柄backspace等enter。由于浏览器不易扩展，并且它们的实现contentEditable高度不一致、不兼容且存在错误，因此从一个版本到另一个版本，CKEditor 会覆盖越来越多的本机行为。还不是全部（实际上 - 它永远不会覆盖所有，因为由于某些原因这可能是灾难性的），但数量很大。例如，所有enter关键行为都是自定义的，在 Webkit 和 Blink CKEditor 句柄上backspace，并且delete在许多情况下，由于仍未解决的错误（1和2），它实现了自己的撤消系统，拦截粘贴和删除的内容并执行自定义 HTML 插入（我请记住，当我们实施它时，这关闭了大量的票证），等等。

   确保一致、可配置和强大的编辑体验的最大努力之一是小部件系统。它内部充满了 hack，但它向开发人员公开了一个干净且非常强大的API，并向最终用户公开了非常一致的行为。它允许实现“特殊的丰富内容单元，这些单元是在编辑器内被视为单个实体的元素组”。因此，小部件系统有能力封装部分内容并将其与浏览器隔离。

经过这个简短的介绍，我终于可以回答你的问题了。您需要将您的<cut>标签实现为小部件。您已经很好地配置了 DTD（您只是忘记设置<cut>元素可以存在于哪些元素以及它是否更像块元素或内联元素），因此解析器将接受它并作为空标记进行处理。现在您需要用一个小部件将其包装起来以将其隔离，这样就不会破坏编辑体验。这应该够了吧。