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

Copy & Paste custom tags in CKEDITOR 4.0

本文关键字：自定义 复制 CKEDITOR      更新时间：2023-09-26

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

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

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

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

  1. 从 CKEditor 获取数据
  2. 从数据中循环遍历每个 DIV 元素
  3. 检查元素是否具有 .convert 类
  4. 如果没有，请不要对它做任何事情
  5. 如果是，请获取其"原始"属性的值 （xxx）
  6. 将元素从 DIV 转换回 XXX
  7. 继续保存数据

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

您可以为每个自定义标签创建一个小部件。不要忘记指定允许的内容和必需的内容属性。并修改 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'
            }
        },
        ...
相关文章：