CKEditor4：使文本与其HTML不同 [英] CKEditor4: Make Text Differ from its HTML
问题描述
我添加 StrInsert 插件到我的CKEditor。它基本上添加了一个按钮，在我的编辑器中，标记为 CRM字段。
该按钮的作用是添加价值给我的编辑。例如：当我从下拉列表中点击 $ [FIRST_NAME] 时，会将文本 $ {__ VCG__VAL__FIRST_NAME} 附加到我的编辑器。
为什么我将下拉菜单命名为 $ [FIRST_NAME] ，而不是 $ {__VCG__VAL__FIRST_NAME} ？因为我希望 HTML 为< p> $ {__ VCG__VAL__FIRST_NAME}< / p> c $ c> text 在编辑器中显示 $ [FIRST_NAME]
在 screenshot_2 中，下面显示的 HTML 正是我想要的，而不是显示文本 $ {__ VCG__VAL__FIRST_NAME} 我要编辑器显示文字 $ [FIRST_NAME]
我的问题是，如何使 HTML 不同于编辑器中显示的某些保留关键字的文本 ？
解决方法好吗？如果可以后处理和预处理数据，解决方案很简单。通过将 $ {__ VCG__VAL__FIRST_NAME} 替换为 $ [FIRST_NAME] 来预处理数据，然后保存，反之亦然。 / p>
对于具有更复杂替换但具有更好的UX的fancier方法，我将使用具有如下代码的小部件：
< p data-real =$ {__ VCG__VAL__FIRST_NAME}> $ [FIRST_NAME]< / p&
你可以创建一个插件来定义每个P都有一个 real 属性作为窗口小部件。然后在保存之前，你会将它们转换为简单的P你喜欢，当加载你会将简单的P转换回小部件。这里的好处是，用户不能意外地编辑文本，并且拖放是容易的。
我不知道为什么你会希望他们是块级别的，我想象变量因为这些会更好的内联 - 但这是根据你的要求。
http://docs.ckeditor.com/#!/guide/dev_widgets
I add StrInsert plugin to my CKEditor. It basically adds a button, which in my editor, is labeled CRM Field.
What the button does is it will append a value to my editor. For example: when I click $[FIRST_NAME] from the dropdown, it will append the text ${__VCG__VAL__FIRST_NAME}to my editor.
Why did I name the dropdown $[FIRST_NAME] instead of${__VCG__VAL__FIRST_NAME}? Because I want the HTML to be <p>${__VCG__VAL__FIRST_NAME}</p> while the text shown in the editor is $[FIRST_NAME]
As seen in screenshot_2, the HTMLshown underneath is exactly what I want, but instead of showing the text ${__VCG__VAL__FIRST_NAME} I want the editor to show the text $[FIRST_NAME]
My question is, how can I make the HTML differ from the text shown in the editor for some reserved keywords?
Is a workaround fine? If you can post- and preprocess the data, the solution is simple. Preprocess the data incoming by replacing ${__VCG__VAL__FIRST_NAME} with $[FIRST_NAME] and before saving, do the opposite.
For a fancier method with more complicated replaces but has a nicer UX, I'd use widgets with code like this:
<p data-real="${__VCG__VAL__FIRST_NAME}">$[FIRST_NAME]</p>
You'd create a plugin that defines that every P with a data-real attribute as a widget. Then before saving you'd convert them into the simple P you like and when loading you'd convert the simple P back to the widget. The benefits here is that the user can't accidentally edit the text and that drag and drop is easy. The replaces should be pretty easy with jquery for example.
I don't know why you'd want them to be block level though, I'd imagine that variables such as these would be nicer inline - but that's up to your requirements.
Widget documentation at http://docs.ckeditor.com/#!/guide/dev_widgets
这篇关于CKEditor4：使文本与其HTML不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
