CKEditor 4：在编辑器视图中替换代码答案

【问题标题】：CKEditor 4: Replacing code when in editor viewCKEditor 4：在编辑器视图中替换代码
【发布时间】：2013-07-20 08:54:07
【问题描述】：

我的软件允许人们将图像上传到我网站上的“文件”部分。我想允许用户将这些图像插入到 CKEditor 4 实例中，但我想控制这些图像的托管位置。

而不是插入以下内容：

<img src="http://domain.com/image.jpg" />

我希望它插入：

<img src="[file:12345678]" />

然后我可以使用 PHP 来控制将在网站上显示的 URL。

问题是，在 CKEditor 的 WYSIWYG 视图中，它显示为找不到图像。无论如何我可以创建一个插件，在所见即所得视图中用图像代码替换[file:12345678]，但在源视图中它恢复为[file:12345678]？

有点像BBCode 插件的工作方式。当您转到源视图时，您会看到：

The [b]brown fox[/b] jumped over the log

但是你看到的编辑器视图：

棕狐跳过了原木

我试图从 BBCode 插件中计算出代码，但 BBCode 解析器似乎是内置的。

我找到了以下代码，但它仅适用于源视图。好像也找不到WYSIWYG视图有没有类似的功能。

editor.dataProcessor.htmlFilter.addRules(
{
    elements :
    {
        img : function( element )
        {
            // I can get the src of any image and then replace it.
            element.attributes.src
        }
    }
});

感谢您提供的任何建议；）

【问题讨论】：

标签： ckeditor

【解决方案1】：

htmlDataProcessor（默认数据处理器）中有两种过滤器——htmlFilter用于过滤HTML格式，所以格式在编辑时使用“内部”编辑器；和dataFilter 用于过滤数据格式，因此格式使用“外部”编辑器 - 您在源模式或调用editor.getData() 时看到的那个。这些名称可能会造成混淆，但当您记住“数据”在外部时会有所帮助（因为 editor.getData()）。

所以我猜想在将数据加载到编辑器（将数据转换为 HTML）时，您希望将 [file:\d+] URL 替换为来自某个哈希的地址，而在取回数据时（将 HTML 转换为数据），您希望进行相反的转换。

因此，您需要扩展两个过滤器 - htmlFilter 和 dataFilter。这就是dataFilter 的外观：

editor.dataProcessor.dataFilter.addRules( {
    elements: {
        img: function( el ) {
            el.attributes.src = fileIdToUrlHash[ el.attributes.src ];
        }
    }
} );

在htmlFilter中也要做类似的操作。

【讨论】：