如何允许 img 标签？

Question

我创建了只插入外部图像的自定义图像插件。但是，如果我禁用默认图像插件，则 img 标签不会出现在表单中。为什么？

这是我的插件：

CKEDITOR.plugins.add( 'img',
{
    init: function( editor )
    {
        editor.addCommand( 'insertImg',
            {
                exec : function( editor )
                {    
                    var imgurl=prompt("Insert url image");
                    editor.insertHtml('<img src="'+imgurl+'" />');
                }
            });
        editor.ui.addButton( 'img',
        {

            label: 'Insert img',
            command: 'insertImg',
            icon: this.path + 'images/aaa.png'
        } );
    }
} );

Answer 1

您需要将您的插件与 CKEditor 4.1 中引入的 ACF - 高级内容过滤器集成。

这是一个有用的指南 - Plugins integration with ACF。

基本上，您是在向编辑器引入一项功能。这个特性需要告诉编辑器它在 HTML 中是如何表示的，那么当这个特性启用时应该允许什么。

在最简单的情况下，当您有一个执行命令的按钮时，您只需定义CKEDITOR.feature 接口的两个属性：allowedContent 和requiredContent。

例如：

editor.addCommand( 'insertImg', {
    requiredContent: 'img[src]', // Minimal HTML which this feature requires to be enabled.
    allowedContent: 'img[!src,alt,width,height]', // Maximum HTML which this feature may create.
    exec: function( editor ) {    
        var imgurl=prompt("Insert url image");
        editor.insertHtml('<img src="'+imgurl+'" />');
    }
} );

现在，当此按钮添加到工具栏时，将自动启用功能并允许使用图像。

Answer 2

您在 addButton 配置中设置了错误的命令名称。您需要设置：

editor.addCommand( 'insertImg', {
         ...
     }
);

以及command 配置在editor.ui.addButton() 中的名称

更新： 一些小提琴：http://jsfiddle.net/kreeg/2Jzpr/522/