CKEditor4:使文本与其超文本标记语言不同

Question

我在我的CKEditor中添加了StrInsert插件。它基本上添加了一个按钮，在我的编辑器中，它被标记为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正是我想要的，但我希望编辑器显示文本$[FIRST_NAME]，而不是显示文本${__VCG__VAL__FIRST_NAME}

我的问题是，对于某些保留关键字，如何使HTML与编辑器中显示的text有所不同？

Answer 1

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

对于具有更复杂替换但具有更好的UX的更奇特的方法，我会使用带有如下代码的小部件：

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

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

我不知道为什么你希望它们是块级的，我想像这样的变量会更好的内联--但这取决于你的需求。

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

Answer 2

我同意Nenotleps的观点。当用户确认编辑器的输入时，只需将$[FIRST_NAME]替换为<p>${__VCG__VAL__FIRST_NAME}</p>，如果将某些数据加载到编辑器中，则执行相反的操作。

您可以使用editor.getData()获取html格式的当前编辑器内容，其中editor是您的ckeditor实例