CKEditor 5 - 允许 span 元素和属性

Posted 2023-02-16

【中文标题】CKEditor 5 - 允许 span 元素和属性

【英文标题】：CKEditor 5 - allow span elements and attributes

【发布时间】：2018-05-23 21:04:41

【问题描述】：

我正在尝试使用 CKEditor 5 框架制作自定义插件。但是我无法插入（通过editor.setData()）段落和其他元素（如跨度）的任何属性。有什么方法可以实现吗？

谢谢！

【参考方案1】：

CKEditor 5 实现了一个自定义数据模型，您可以在Architecture introduction guide 中了解更多信息。

自定义数据模型的存在意味着编辑器需要知道如何将该模型转换为视图结构（DOM）以进行编辑。此外，由于通常编辑器输出 html（或结构上“兼容”的格式，如 Markdown、BBCode 等），因此需要进行类似的转换才能从编辑器中获取数据。最后，编辑器需要能够将视图转换为模型，以便您能够将数据加载到编辑器中。

旁注：您可能还希望将模型直接保存到数据库中，这样可以避免将视图转换为模型（在setData()），但尽管可能，这仍然意味着编辑器需要知道如何将模型转换为视图进行编辑，将视图转换为模型进行粘贴。

这一切意味着什么？这意味着除非现有编辑器功能可以选择特定内容，否则它将被删除。它根本不会在数据加载时从视图转换为模型，因此会被遗忘。

因此，一切都与转换器有关。您需要教您的编辑器如何理解 HTML 以及如何呈现 HTML。实际上，您还需要教它如何编辑模型的这些特定部分（此时）（通过配置架构和实现适当的 UI）。

那么，如何编写转换器和配置架构？

嗯，这是目前的一个问题，因为现在（截至 2017 年 12 月）我们正处于 CKEditor 5 engine 重构的中间。我们拥有的架构很棒，但 API 被证明太难使用，所以我们现在正在改进它们，这意味着我在这里写的任何东西下个月都将失效。所以，相反，我建议查看CKEditor 5 packages 的来源（例如，查看plugins in the basic styles package）。

【讨论】：

这有什么更新吗？有没有像在 CKEditor 4 中那样定义 allowedContent 的简单方法？

是否有新的更新允许使用allowContent

与上述 2 cmets 相同的问题.... CKEDITOR5 中实现 allowContent 有没有简单的方法？

不要重复同样的问题，但是有吗？我需要允许 标签作为根元素，因为我的内容包含在 标签中。 现在有解决办法吗。我想设置像 => <p class="mention" data-id="1">A paragraph with <a href="https://ckeditor.com">some link</a>.</p> 这样的数据，但它正在格式化和删除类和自定义添加的属性。我正在使用以下方法设置数据 - => setData(content2);也尝试过这样，但没有奏效。 const domEditableElement = document.querySelector( '.ck-editor__editable' ); const editorInstance = domEditableElement.ckeditorInstance; editorInstance.setData( '<p class="mention" data-id="1">A paragraph with </p>'); 有人摆脱了这个问题并得到了修复吗？