2

我的软件允许人们将图像上传到我网站上的“文件”部分。我想允许用户将这些图像插入到 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 解析器似乎是内置的。

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

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

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

4

1 回答 1

4

有两种类型的过滤器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.

于 2013-07-20T09:49:39.817 回答