Javascript CKEditor4：使文本与其HTML不同

我将

StrInsert

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

CRM字段

该按钮的作用是将一个值附加到我的编辑器中。例如：当我从下拉列表中单击

$[FIRST\u NAME]

时，它会将文本

${{uuuuuuuuvcg\uuuuu VAL\uuuuu FIRST\u NAME}

附加到我的编辑器中

为什么我给下拉列表命名为

$[FIRST\u name]

，而不是

${{uuuuuuuuvcg\uuuuuuu VAL\uuuuu FIRST\u name}

？因为我希望

HTML

是

${{uuuuuvcg\uuuu VAL\uuuu FIRST\u NAME}

，而编辑器中显示的

文本是
$[FIRST\u NAME]

如
screenshot_2
所示，下面显示的
HTML
正是我想要的，但不是显示文本
${{uuuuuuu VCG\uu VAL\uu FIRST\u NAME}
我希望编辑器显示文本
$[FIRST\u NAME]

我的问题是，如何使
HTML
与编辑器中显示的一些保留关键字的
文本有所不同？
是一种解决方法吗？如果您可以对数据进行后期和预处理，那么解决方案很简单。通过将
${code>$[FIRST\u NAME]
替换为
$[FIRST\u NAME]
预处理传入的数据，并在保存之前执行相反的操作

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

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

$[FIRST\u NAME]

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

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

小部件文档在
我同意Nenotleps。
当用户确认编辑器的输入时，只需将
$[FIRST\u NAME]
替换为
${p>{VCG\uu VAL\uu\u FIRST\u NAME}
，如果某些数据加载到编辑器，则以相反的方式进行

您可以使用
editor.getData（）
以html格式获取当前编辑器内容，其中editor是您的ckeditor实例
插件链接--我无法向原始帖子添加超过2个链接