CKEditor:修改 View 而不更改数据

Question

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

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

我尝试通过向 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;
                } );
            }
     });
 });

它的作用是用图像标签替换占位符，但切换到源 View 时，img 标签也存在。

有没有一种简单的方法可以仅将过滤器应用于所见即所得 View 。我看到的唯一方法是添加一个 htmlFilter 来将 img 标签恢复为占位符。

Answer 1

Is there an easy way to only apply a filter to the wysiwyg view. The only way I see is to add a htmlFilter that would revert the img-tag back to a placeholder.

良好的思维。或者，如果您不希望在每次模式更改时从服务器中删除/获取图像，您可以将占位符放入图像标记的 data- 属性中。这一切都取决于您的用例，但最重要的是，当您将数据加载到编辑器中时使用 dataFilter ，而当您从编辑器获取数据时使用 htmlFilter (相同的方法是在获取数据并切换到源模式时使用，因此 htmlFilter 适用于此处)。