如何在 CKEditor 中配置图像属性对话框？

Question

我当前的图像属性对话框只有 Image Info 和 Link 选项卡可用。我想更改此对话框以便：

我想从 Image Info 屏幕中删除宽度、高度、边框、HSpace、VSpace、Alignment 和 Preview 元素
我想删除 Link 选项卡
我想启用 Upload 选项卡，以便用户可以选择驻留在其本地计算机上的图像文件

我进行了大量搜索，但完全不明白如何执行上述操作。请问有什么指点吗？我正在使用 CKEditor 4.4.6 标准版。

Answer 1

以下资源可能会有帮助：

CKEditor 开发者文档中的 Dialog Windows HOWTO 部分。
Using CKEditor Dialog API 示例（它也可以在您的本地 CKEditor 包中获得）——检查其源代码以了解更改是如何完成的。
显示所有 CKEditor 对话框 window 元素的名称和 ID 的 Developer Tools 插件。

Answer 2

好的，下面是有关如何处理 图像对话框的代码：

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

    if (dialogName == 'image') {
        var infoTab = dialogDefinition.getContents( 'info' );
        infoTab.remove( 'txtBorder' ); //Remove Element Border From Tab Info
        infoTab.remove( 'txtHSpace' ); //Remove Element Horizontal Space From Tab Info
        infoTab.remove( 'txtVSpace' ); //Remove Element Vertical Space From Tab Info
        infoTab.remove( 'txtWidth' ); //Remove Element Width From Tab Info
        infoTab.remove( 'txtHeight' ); //Remove Element Height From Tab Info

        //Remove tab Link
        dialogDefinition.removeContents( 'Link' );
    }
});

对于第3点，默认的CKEditor不包含图像浏览工具...这意味着上传和浏览按钮不会出现...

这里有 3 个选项，你可以在这个页面上看到我的评论：link 如何做到这一点。

如何在 CKEditor 中配置图像属性对话框？

How do I configure the Image Properties dialog box in CKEditor?

ckeditor