CKEditor4:使文本与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 进行替换应该非常容易。

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

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