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

Question

我刚刚安装了一个版本的CKEDITOR 4.3，加上一些CkBuilder ，还包括镜像2插件 。

现在，我想从属性选项卡中删除更改图像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
    }
});

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

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

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

有没有一种方法可以从“图像属性”选项卡中删除“更改URL”文本字段，并添加“更改边框粗细”功能？

Answer 1

删除“更改URL”功能

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

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
    }
});

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

在官方Image2插件页面的评论部分中，您可以找到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);
        });
    }

});

我希望这会对遇到我同样问题的人有所帮助。