如何阻止CKEditor 4.x调用setData时替换花括号及内容？

这个问题我之前也踩过坑，本质是CKEditor默认启用的Template插件（或类似的变量替换类插件）会把{...}识别为模板变量，如果没有对应的替换值，就直接替换成空字符串了。下面给你几个实用的解决办法：

1. 直接禁用Template插件（最简单粗暴） #

如果你完全不需要模板功能，直接把这个插件关掉就行。在CKEditor的配置代码里添加：

CKEDITOR.config.removePlugins = 'template';
// 要是还有其他类似mailmerge这类会解析花括号的插件，也可以一起移除：
// CKEDITOR.config.removePlugins = 'template,mailmerge';

这样操作后，setData("Hello, {name} {family}, Welcome to ...")就能完全保留原始内容，不会再被清空花括号里的文本。

2. 转义花括号（保留模板功能时用） #

如果还需要用模板，但想保留某些特定的花括号内容，可以把花括号转成HTML实体：

• 将{替换为{
• 将}替换为}

调用setData前先处理字符串：

const originalText = "Hello, {name} {family}, Welcome to ...";
const escapedText = originalText.replace(/{/g, '{').replace(/}/g, '}');
editor.setData(escapedText);

CKEditor会把转义后的实体当作普通文本渲染，显示出来还是{name} {family}。之后如果需要获取原始内容，在getData后再转回来即可：

const retrievedText = editor.getData().replace(/{/g, '{').replace(/}/g, '}');

3. 修改模板变量的语法（自定义规则） #

要是想保留模板功能，但换一种变量格式（比如用[[...]]代替{...}），可以修改Template插件的默认规则：

// 覆盖默认的模板替换正则，只识别[[...]]格式的变量
CKEDITOR.plugins.template.replacePattern = /\[\[([^\]]+)\]\]/g;

// 设置你的模板替换值
CKEDITOR.config.template_replaceValues = {
  'name': 'John',
  'family': 'Doe'
};

这样只有[[name]]会被替换，原来的{name}就会被当作普通文本保留下来。

4. 排查其他可能的插件 #

如果上面的方法都没效果，检查下是不是启用了邮件合并（mail merge）这类第三方插件，它们也可能会解析{...}变量，找到对应插件后禁用或调整配置即可。

内容的提问来源于stack exchange，提问作者user335870