Question

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

而不是插入以下内容：

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

我希望它插入：

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

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

问题是，在CKEditor的WYSIWYG视图中，它显示无法找到图像。无论如何我可以创建一个插件，在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
        }
    }
});

感谢您提供任何建议;）

Answer 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。

中执行类似的操作

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

1 个答案: