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());
                }
            });
        });
    },

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

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中

1 个答案: