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

Question

我当前的“图片属性”对话框仅提供Image Info和Link个标签页。我想更改此对话框，以便：

1. 我想从Image Info屏幕中删除宽度，高度，边框，HSpace，VSpace，对齐和预览元素
2. 我想删除Link标签
3. 我想启用Upload标签，以便用户可以选择驻留在本地计算机上的图片文件

我一直在进行大量搜索，但根本无法理解如何执行上述操作。有什么指针吗？我使用的是CKEditor 4.4.6 Standard。

Answer 1

好的，这里有关于如何处理图像对话框的代码：

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 ，了解如何执行此操作。

Answer 2

以下资源可能会有所帮助：

• CKEditor开发人员文档中的Dialog Windows HOWTO部分。
• Using CKEditor Dialog API示例（它也可以在您的本地CKEditor包中找到） - 检查其源代码，了解更改的完成方式。
• Developer Tools插件，显示所有CKEditor对话框窗口元素的名称和ID。