CkEditor 4.3的Image2插件：如何删除URL并向属性对话框添加边框管理

Question

我刚刚安装了一个由CkBuilder制作的CkEditor 4.3版本，其中还包含Image2 plugin。

现在，我想删除从属性选项卡更改图像URL的可能性，通过双击图像打开：

从上图中可以看出，我可以删除默认存在的“hasCaption”ckeckbox。为此，我使用以下代码：

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image2') {        
        var infoTab = dialogDefinition.getContents('info');
        infoTab.remove('hasCaption'); //Removing the "add caption" functionality
        infoTab.remove('alt'); //Removing the "alternative text" functionality
    }
});

我的问题是没有办法删除“更改网址”功能。

此外，使用图像插件（当您添加image2插件时自动从CkBuilder禁用）我可以更改图像边框的粗细。新的image2插件中未提供此功能。

所以，我的最后一个问题如下：

有没有办法从“图像属性”标签中删除“更改网址”文本字段，并添加“更改边框粗细”功能？

Answer 1

删除“更改网址”功能

我找到了关于删除“更改网址”功能的问题的解决方案。只需添加以下内容：

infoTab.remove('src');

到问题中写的代码。这样，完整的源代码是：

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image2') {        
        var infoTab = dialogDefinition.getContents('info');
        infoTab.remove('hasCaption'); //Removing the "add caption" functionality
        infoTab.remove('alt'); //Removing the "alternative text" functionality
        infoTab.remove('src'); //Removing the "change URL" functionality
    }
});

添加“更改边框粗细”功能

从official Image2 plug-in page，在评论部分，您可以找到sebstefanov（可能是CkEditor的开发人员）的帖子，其中他说：

  

[border属性]不包括在内，因为边框应由样式表处理。

之后，在同一页面的同一部分，有些用户表示反对这一选择，sebstefanov表示团队已了解问题。

所以我唯一能做的就是等待一些官方解决方案...

编辑我找到了一个解决方案，以便添加“更改边框粗细”功能。

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName == 'image2') {        
        var infoTab = dialogDefinition.getContents('info');

        infoTab.add({
            type: 'text',
            width: '50px',
            label : 'Border Thickness',
            id : 'borderField',
            'default' : '0',
            validate : function()
            {
                if ( /[^\d]/.test( this.getValue() ) )
                    return borderErrorMessage;
            }
        });

        var dialog = dialogDefinition.dialog;
        dialog.on('show', function () {
            var image = this.widget.parts.image;

            var borderField = this.getContentElement('info', 'borderField');

            //Using jQuery, I can get the border of the image.
            //You can use any other methods you prefer
            var borderWidth = $(image.$).css("border-left-width").replace(/[^\d]+/g, '');
            borderWidth = borderWidth ? borderWidth : 0;

            borderField.setValue(borderWidth);
        });
        dialog.on('ok', function () {
            var image = this.widget.parts.image;

            var borderField = this.getContentElement('info', 'borderField');

            var newBorderWidth = borderField.getValue() + 'px';

            image.setStyle('border-style', 'solid');
            image.setStyle('border-width', newBorderWidth);
        });
    }

});

我希望这可以帮助那些遇到同样问题的人。