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

【问题标题】：How do I configure the Image Properties dialog box in CKEditor?如何在 CKEditor 中配置图像属性对话框？
【发布时间】：2015-02-05 23:37:05
【问题描述】：

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

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

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

【问题讨论】：

标签： ckeditor

【解决方案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不包含Image Browsing Facility...这意味着不会出现上传和浏览按钮...

这里有 3 个选项，您可以在此页面上查看我的评论：link 了解如何执行此操作。

【讨论】：

我正在使用 ckeditor 4.x 我尝试使用上面的代码删除链接选项卡，但它不起作用。我收到错误：未捕获的类型错误：无法读取 null 的属性“删除”。
@Moe 我没有在 ev.data 对象中得到定义
4 年后，这是一个很好的答案。谢谢。

【解决方案2】：

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

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

【讨论】：

我查看了该文档，但我仍然很困惑。我只想让用户能够在他们的本地机器上选择一个图像文件以包含在他们的文本区域中，而不是一个指向托管在其他地方的图像文件的 URL。你能建议怎么做吗？