javascript - CKEditor4 : Make Text Differ from its HTML

Question

我添加 StrInsert插件到我的 CKEditor。它基本上添加了一个按钮，在我的编辑器中，它被标记为 CRM Field .

按钮的作用是将一个值附加到我的编辑器。例如:当我点击 $[FIRST_NAME]从下拉列表中，它将附加文本 ${__VCG__VAL__FIRST_NAME}给我的编辑。

为什么我将下拉菜单命名为 $[FIRST_NAME]而不是 ${__VCG__VAL__FIRST_NAME} ？因为我想要 HTML成为<p>${__VCG__VAL__FIRST_NAME}</p>而 text显示在编辑器中的是$[FIRST_NAME]

如 screenshot_2 所示, HTML下面显示的正是我想要的，而不是显示文本 ${__VCG__VAL__FIRST_NAME}我希望编辑器显示文本 $[FIRST_NAME]

我的问题是，如何制作 HTML不同于 text在编辑器中显示某些保留关键字？

Answer 1

有解决方法吗？如果您可以对数据进行后处理和预处理，那么解决方案就很简单。通过将 ${__VCG__VAL__FIRST_NAME} 替换为 $[FIRST_NAME] 来预处理传入的数据，并在保存之前执行相反的操作。

对于具有更复杂替换但具有更好用户体验的更高级方法，我会使用带有如下代码的小部件:

<p data-real="${__VCG__VAL__FIRST_NAME}">$[FIRST_NAME]</p>

您将创建一个插件，将每个具有 data-real 属性的 P 定义为小部件。然后在保存之前将它们转换为您喜欢的简单 P，并在加载时将简单 P 转换回小部件。这样做的好处是用户不会意外地编辑文本并且拖放很容易。例如，使用 jquery 进行替换应该非常容易。

虽然我不知道您为什么希望它们是 block 级的，但我想像这样的变量会更好地内联 - 但这取决于您的要求。

小部件文档位于 http://docs.ckeditor.com/#!/guide/dev_widgets