如何从源代码模式隐藏 CKEditor 小部件内容

Question

我正在为 CKEditor 4 开发一个新的小部件，它的一些内容是由解析 CKEditor 内容的工具动态生成的 window。

起初，小部件只是一个 ，但随后会动态添加一些内容。

当切换到CKEditor的source模式时，span里面的所有内容都是可见的，而且变得很乱。此外，我不想将所有内容保存在数据库中，而只保存外部 

我很确定这是可行的，因为这就是 CKEditor 的 MathJax plugin 的工作方式：当使用 TeX 语法插入公式时，插件会生成一个 [formula here]。然后，Mathjax 运行并排版公式，在 CKEditor 中生成漂亮的类似 LaTeX 的公式。但是，在检查代码时，它只显示外部 [formula here].

我检查了他们的源代码，发现他们在小部件中使用了 iframe。

有人可以向我解释它是如何工作的，以及如何在可能的情况下不使用 iframe 来实现它吗？

谢谢！

Answer 1

我实际上使用 CKeditor 小部件的 downcast 属性实现了预期的结果。我们可以注册一个自定义方法，该方法将用于 将小部件 转换为其基于文本的表示形式。此外，当从 wysiwyg 模式切换到 source 模式和调用 editor.getData().

时都会调用它

此外，阅读文档，您会发现：

The downcast function will be executed in the CKEDITOR.plugins.widget context

意味着 this 指向您的小部件。所以，基本上，我用一个文本节点替换了我所有的小部件的子节点：

downcast: function(element) {
  element.children = [new CKEDITOR.htmlParser.text(CKEDITOR.tools.htmlEncode(this.data.text))];
  return element;
}

它成功了！

如何从源代码模式隐藏 CKEditor 小部件内容

How to hide CKEditor widget content from source mode

javascript

widget

ckeditor

mathjax

ckeditor4.x