CKEditor：修改视图而不更改数据答案

【问题标题】：CKEditor: Modifying view without changing dataCKEditor：修改视图而不更改数据
【发布时间】：2017-08-23 18:22:43
【问题描述】：

我的内容在占位符中按 ID 引用图像（例如 "$m(12345)" ）。我有一个 REST 调用，它将为占位符返回一个 img-tag。

我希望 CKEditor 在编辑器中打开内容或插入占位符时显示图像。但我希望占位符保留在内容中（包括切换到源视图时）

我尝试通过向 dataFilter 添加规则来做到这一点：

CKEDITOR.on('instanceLoaded', function(ckeditor){
     var mediaPlaceholderRegex = /\$m\(.*\)/;
     ckeditor.editor.dataProcessor.dataFilter.addRules({
         text: function( text, node ) {
                return text.replace( mediaPlaceholderRegex, function( match ) {

                    var params = "placeholder="+match;
                    var xhttp = new XMLHttpRequest();
                    xhttp.open("POST", url, false);
                    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhttp.send(params);
                    return xhttp.responseText;
                } );
            }
     });
 });

它可以用图像标签替换占位符，但是当切换到源视图时，img-标签也在那里。

有没有一种简单的方法可以只将过滤器应用于所见即所得的视图。我看到的唯一方法是添加一个 htmlFilter，它将 img-tag 恢复为占位符。

【问题讨论】：

这不是占位符的重点。从源视图来回切换将应用数据处理。

标签： ckeditor

【解决方案1】：

有没有一种简单的方法可以只将过滤器应用于所见即所得的视图。我看到的唯一方法是添加一个 htmlFilter，它将 img-tag 恢复为占位符。

好主意。如果您不希望在每次模式更改时从服务器中删除/获取图像，例如，您可以将占位符放入图像标记的data- 属性中。这一切都取决于您的用例，但底线是dataFilter 在您将数据加载到编辑器时使用，htmlFilter 在您从编辑器获取数据时使用（获取数据和切换到源模式时使用相同的方法，所以htmlFilter 适用于此）。

【讨论】：