在 CKEDITOR 4.0 中复制和粘贴自定义标签

Question

我的 HTML 中有一些自定义标签。

喜欢<mytag class="atr">text</mytag>。我想复制整个标签并粘贴。当我尝试复制时，我只得到文本，我知道编辑器将只支持有效的 html 标签。比如复制粘贴粗体、斜体等，有没有其他方法可以让我的自定义标签复制？。就像使用 CKEDITOR 或 htmlparser 的 DTD。有什么建议吗？

Answer 1

评论太长了。我不确定这种方法是否有效——取决于复制和粘贴事件的工作方式。我建议您收听 "paste" 事件，并在粘贴期间将传入元素从 <xxx> 转换为例如 <div class="converted" original="xxx" >。 xxx 可以是任何标签名称，例如 mytag 或 iloveponies。

然后在保存内容之前检查来自 CKEditor 的数据并将元素转换回其原始状态。该算法可能如下所示：

从 CKEditor 获取数据
遍历数据
检查元素是否有.converted class
如果否，请不要对其进行任何操作
如果是，获取它的 "original" 属性 (xxx)
将元素从 DIV 转换回 XXX
继续保存您的数据

您可以在前端或后端执行此操作，很可能两者都有可用于此类操作的工具。我猜前面的会更容易。

Answer 2

您可以为每个自定义标签创建一个 Widget。不要忘记指定 allowedContent- 和 requiredContent-Attributes。并修改dtd使标签可编辑

例如：

CKEDITOR.dtd.$editable['mytag'] = 1;    
editor.widgets.add('mytagWidget', {
        allowedContent: 'mytag(atr)',
        requiredContent: 'mytag',
        template: '<mytag class="atr">text</mytag>',
        editables: {
            text: {
                selector: '.atr'
            }
        },
        ...

在 CKEDITOR 4.0 中复制和粘贴自定义标签

Copy & Paste custom tags in CKEDITOR 4.0

html

javascript

copy-paste

ckeditor