Javascript CKEditor中自定义自动关闭标记的问题

我有一个插件，可以在文本中插入标签

。 它工作正常，结果是可以预期的，但在编辑器窗口中，

转换为

，包装下面的段落并妨碍进一步编辑

GIF-

有没有办法解决这个问题

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'
    });
}
});

CKEDITOR.plugins.add（'pagecut'{
朗：“德，恩，如”，
onLoad:function（）{
var css=（'display:block；clear:both；width:100%；border top:#999 1px虚线；padding:0；height:1px；cursor:default；'）；
var cssBefore=(
'内容：'；'+
'背景：url（'+CKEDITOR.getUrl（this.path+'images/image.png'）+'））不重复右中心；'+
'高度：14px；宽度：25px；位置：相对；显示：块；顶部：-8px；浮动：右侧；'
);
addCss（'cut{'+css+'}cut:before{'+cssBefore+'}'）；
},
init：函数（编辑器）{
CKEDITOR.dtd['cut']={}；
CKEDITOR.dtd.$empty['cut']=1；
CKEDITOR.dtd.$nonEditable['cut']=1；
CKEDITOR.dtd.$object['cut']=1；
editor.addCommand（'insertPagecut'{
执行：函数（编辑器）{
var element=CKEDITOR.dom.element.createFromHtml（“”）；
编辑器.插入元素（元素）；
}
});
editor.ui.addButton（'Pagecut'{
标签：editor.lang.pagecut.toolbar，
命令：“insertPagecut”，
icon:this.path+'images/icon.png'，
工具栏：“链接”
});
}
});

嗯，我肯定我在一些问题中对此进行了彻底的解释，但我找不到它，所以这里有另一种解释：D

在试图在CKEditor中编辑非HTML标记之前，必须了解两个重要事实：

CKEditor是一个HTML编辑器

当然，自定义标记在HTML中开始越来越流行。您还可以说XML是HTML的某种泛化（虽然不是很精确，因为它有其他规则），所以如果CKEditor处理HTML，为什么它不能同样好地处理其他标记呢。嗯-答案很简单-，因为HTML标记有一个含义，而且CKEditor知道这一点。但它不知道自定义标记的含义。标签的含义（什么是列表，它有项目，它们是块元素等等）对于实现编辑算法至关重要

你可以说，这很公平。但为什么没有对CKEditor的配置（例如对象）进行概括，以便可以配置每个可能标记的含义？因为每次泛化都会增加复杂性，HTML编辑已经足够复杂了

那么，为什么这个对象存在呢？因为CKEditor的某些组件在某种程度上是可配置的。DTD对CKEditor的影响最大（主要在运行期间使用），因此这是最可配置的组件。其他算法，如回车键处理、退格/删除、列表编辑（这是一项非常复杂的任务）都只是略微可配置的，并且不能保证它们可以与自定义标记一起使用

编辑在浏览器中进行，部分由浏览器处理

这一事实很重要，因为这意味着浏览器的功能也在影响CKEditor的限制。浏览器必须能够解析和呈现标记（幸运的是，这一部分在现代浏览器中工作得相当好——IE8是最后一个出现巨大问题的浏览器），并且必须能够编辑它。这意味着-呈现插入符号、句柄选择、句柄退格、回车等。由于浏览器不易扩展，而且它们的

contentEditable

实现高度不一致、不兼容且存在缺陷，因此，从一个版本到另一个版本，CKEditor会覆盖越来越多的本机行为。还不是全部（事实上——它永远不会覆盖全部，因为由于某些原因，这可能是灾难性的），但数量很大。例如，所有的输入键行为都是自定义的，在Webkit和Blink上，由于尚未解决的错误，编辑器在许多情况下处理退格和删除（并且，它实现自己的撤消系统，拦截粘贴和删除的内容，并执行自定义HTML插入）（我记得当我们实施它时，它关闭了大量的门票）等等

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

---

在简短的介绍之后，我终于可以回答您的问题了。您需要将

标记实现为一个小部件。您已经很好地配置了DTD（您只是忘记了设置

元素可以存在的元素以及它更像块还是内联元素），因此解析器将接受它并将其作为空标记处理。现在您需要用小部件包装它，以便将其隔离，使其不会破坏编辑体验。这应该可以解决问题。

此解决方案是否仍然有效，或者是否适用于其他版本？自从我回答第二个问题以来，情况发生了重大变化estion。我提到我们将在CKEditor 4.1中介绍小部件，并给出如何在没有它的情况下处理问题的答案。在这里，我将进一步解释一般问题，并将我的故事介绍给point小部件作为正确的解决方案：）。但最重要的是，这两个问题都非常具体-需要问一个一般性的问题。@Reinmar是否应该有单独的标签来帮助识别4.1之前/之后的特定问题，因为答案会因版本而异？我觉得没有必要。4.0、4.1、4.3、4.5 is g中有重大更新太大了，一切都改变了，所以它会改变