我有一个插件，用于在文本中插入标记<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'
});
}
});
嗯，我确信我在某个问题中已经彻底解释过了，但我找不到，所以这里有另一个解释：D。
在尝试编辑CKEditor中的非HTML标记之前，必须了解以下两个重要事实：
-
CKEditor是一个HTML编辑器。
当然，自定义标记在HTML中开始越来越流行。您也可以说XML是HTML的某种概括(尽管不准确，因为它有其他规则)，所以如果CKEditor处理HTML，为什么它不能同样好地处理其他标记呢。答案很简单，因为HTML标签有一个含义，CKEditor知道，但它不知道自定义标签的含义。标签的含义(列表是什么，它有项目，它们是块元素，等等)对于实现编辑算法至关重要。
你可以说，这很公平。但为什么CKEditor的配置(例如
CKEDITOR.dtd对象)没有被概括，所以每个可能的标签的含义都可以被配置？因为每一个概括都会增加复杂性，而HTML编辑已经足够复杂了。那么为什么
CKEDITOR.dtd对象存在呢？因为CKEditor的某些组件在某种程度上是可配置的。DTD对CKEditor的HTML解析器(主要在数据处理过程中使用)的影响最大，因此它是最可配置的组件。其他算法，如enter键处理、退格/删除、列表编辑(这是一项非常复杂的任务)，只能进行轻微的配置，并且不能保证它们能与您的自定义标签一起使用。 -
编辑发生在浏览器中，部分由浏览器处理。
这一事实很重要，因为这意味着浏览器的功能也在影响CKEditor的限制。浏览器必须能够解析和呈现您的标签(幸运的是，这一部分在现代浏览器中运行得相当好-IE8是最后一个出现巨大问题的浏览器)，并且必须能够编辑它。这意味着-呈现插入符号、句柄选择、句柄退格、<kbd〉输入>等。由于浏览器不容易扩展，并且它们对
contentEditable的实现高度不一致，从一个版本到另一个版本，CKEditor覆盖了越来越多的本地行为。还不是全部(事实上，它永远不会凌驾于所有之上，因为出于某些原因，这可能是灾难性的)，但数量很大。例如，所有enter键的行为都是自定义的，在Webkit和Blink上，由于仍然未解决的错误(1和2)，CKEditor在许多场景中处理退格小部件系统是确保一致、可配置和强大编辑体验的最大努力之一。它内部充满了技巧，但它向开发人员展示了一个干净而强大的API，并向最终用户展示了一种非常一致的行为。它允许实现"特殊的丰富内容单元，这些单元是在编辑器中被视为单个实体的元素组"。因此，小部件系统能够封装部分内容并将其与浏览器隔离。
经过简短的介绍，我终于可以回答你的问题了您需要将<cut>标记实现为一个小部件。您已经很好地配置了DTD(只忘记设置<cut>元素可以存在的元素，以及它更像块元素还是内联元素)，因此解析器将接受它并将其作为空标记进行处理。现在你需要用一个小部件来包装它，以便隔离它，这样它就不会破坏编辑体验。这就行了。