CKEditor 4:在编辑器视图中替换代码

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

而不是插入以下内容：

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

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

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

棕色的狐狸跳过了圆木

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

我找到了以下代码，但它只适用于源代码视图。我似乎无法确定所见即所得视图是否有类似的功能

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

---

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

在（默认的数据处理器）中有两种类型的过滤器--

htmlFilter

用于过滤HTML格式，因此在编辑时使用“内部”编辑器的格式；以及用于过滤数据格式的

dataFilter

，因此该格式使用“外部”编辑器-即在源代码模式下或调用

editor.getData（）

时看到的格式。这些名称可能会令人困惑，但当您记住“数据”在外部时，它会有所帮助（因为

editor.getData（）

）

因此，我猜想，当将数据加载到编辑器（将数据转换为HTML）时，您希望将

[文件：\d+]

URL替换为某个哈希中的地址，而当获取数据（将HTML转换为数据）时，您希望进行相反的转换

因此，您需要扩展这两个过滤器-

htmlFilter

和

dataFilter

。这就是

数据过滤器的外观：

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

您必须在
htmlFilter
中执行的类似操作（这是默认的数据处理器）
htmlFilter
中有两种类型的过滤器，用于过滤HTML格式，因此在编辑时使用“内部”编辑器中的格式；以及用于过滤数据格式的
dataFilter
，因此该格式使用“外部”编辑器-即在源代码模式下或调用
editor.getData（）
时看到的格式。这些名称可能会令人困惑，但当您记住“数据”在外部时，它会有所帮助（因为
editor.getData（）
）

因此，我猜想，当将数据加载到编辑器（将数据转换为HTML）时，您希望将
[文件：\d+]
URL替换为某个哈希中的地址，而当获取数据（将HTML转换为数据）时，您希望进行相反的转换

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

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

在
htmlFilter
中必须执行的类似操作