CKEditor4：使文本与HTML不同

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

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

为什么我将下拉列表$[FIRST_NAME]命名为${__VCG__VAL__FIRST_NAME} ？ 因为我希望HTML

${__VCG__VAL__FIRST_NAME}

而编辑器中显示的text是$[FIRST_NAME]

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

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

Answer 1

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

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

 
$[FIRST_NAME] 

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

我不知道你为什么要让它们成为块级别，我想像这些变量会更好内联 – 但这取决于你的要求。

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

Answer 2

我同意Nenotleps。 当用户确认编辑输入时，只需将$[FIRST_NAME]替换$[FIRST_NAME]

${__VCG__VAL__FIRST_NAME}

，如果某些数据加载到编辑器，请

${__VCG__VAL__FIRST_NAME}

执行。

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