在 CKeditor 中粘贴自定义标签

Question

在我的 Ckeditor（4.8 版）中，我有一个自定义 citation 标签，例如 <citation>page 2</citation>。我的问题是，当我复制粘贴 <citation>page 2</citation>、To be or not to be<citation>page 2</citation> 等内容时。我的自定义标签丢失了，结果是 To be or not to bepage 2 而不是 To be or not to be<citation>page 2</citation>.

在我的配置中，我允许自定义标签：

config = {extraAllowedContent: 'citation'}

我目前的解决方法如下：

init: function(editor){
        editor.on('contentDom',function()
        {
            editor.on('paste', function(e)
            {
                var focusManager = new CKEDITOR.focusManager(editor);
                if(focusManager.hasFocus)
                {
                    e.data.dataValue = "<span class='paste'>" + e.data.dataValue + "</span>" //wraps it in a utils tag
                }
            });

            editor.on('afterPaste', function(e)
            {
                var focusManager = new CKEDITOR.focusManager(editor); //unwraps it again
                if(focusManager.hasFocus)
                {
                    var $content = $("<div/>").html(editor.getData());
                    $content.find("span.paste").children().unwrap();
                    editor.setData($content.html());
                }
            });
        });
    },

在粘贴之前，它将要粘贴的内容包装到一个跨度中，并在再次粘贴后将其删除。我知道有一个关于我的问题的问题。但是，我想知道什么是正确的方法。有人可以帮我吗？谢谢。

Answer 1

为了使用自定义内联元素，您需要修改 DTD 对象，如下所示：

//<customtag><span style="background-color:blue;">test</span></customtag>
CKEDITOR.dtd.customtag = { '#' : 1, 'span' : 1, 'img' : 1 }; // Only text, spans and images are allowed as content of custom tag
CKEDITOR.dtd.$inline.customtag = 1;// Custom tag is inline
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.
var editor = CKEDITOR.replace( 'editor1', {
    extraAllowedContent : 'customtag(*)[*]{*}'
});

但是，如果您想使用块级标签，那么您需要修改 CKEditor DTD 源代码并构建您的自定义编辑器实例。可以在这个线程下阅读更多相关信息：ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>").

注意：我个人不建议过多地使用自定义标签。请记住，浏览器通常不知道这些标签，而且您需要的东西越花哨，您就越深入，就越有可能陷入浏览器的某些怪癖。使用块级标签，它们的内部内容可以移出标签。对于内联标签，当使用 <variable data-custom-attr="text value" /> 等空的自定义标签时，您可能会得到意想不到的额外文本换行（您应该使用 <variable data-custom-attr="text value"></variable> 代替）。

在 CKeditor 中粘贴自定义标签

Paste custom tag in CKeditor

javascript

copy-paste

paste

ckeditor

ckeditor4.x