CKEditor 4 - 删除图像工具栏按钮导致图像对话框不再显示宽度和高度属性

Question

我正在使用 CKEditor 4 并尝试自定义工具栏以向我们软件的非管理员用户显示。我知道如何从工具栏中删除 "Image" 按钮以防止非管理员将图像元素插入到我们的模板中。但是，我仍然希望他们能够通过双击模板来编辑模板中的现有图像。删除图像插入按钮后，我仍然可以执行此操作，并且生成的对话框会显示源、替代文本和图像预览部分。但是，宽度、高度和比率锁定控件是隐藏的。检查标记后，看起来 class cke_dialog_ui_hbox 的 table 位于 txtWidth 容器上方的几个节点，其内联显示样式设置为 none.

有没有办法隐藏/不显示“插入图像”工具栏按钮，同时仍显示“图像”对话框中的宽度、高度和比例锁定控件？

我已尝试使用 config.removeButtons 和 config.toolbar 并指定我希望在 insert 组中显示的按钮，但按钮的存在与否似乎会影响通过任意隐藏某些控件来实现插件功能。

Answer 1

听起来最好的解决方案是使用 CSS 隐藏按钮。

在您的主题中（例如 ckeditor/skins/moona-lisa）打开 editor.css 并在底部添加：

a.cke_button.cke_button__image { display: none; }

保存并强制刷新（Ctrl-Shift-[点击刷新]）就可以了。

Answer 2

我通过 Fiddling 了解到 allowedContent 对象中 img 定义的 styles 属性决定了 width 和 height 字段是否在图像对话框中显示。

CKEDITOR.editorConfig = function( config ) {
    allowedContent = {
        img: {
            attributes: true,
            classes: true,
            styles: 'width,height'
        }
    }
};

要么我在某处的文档中遗漏了它，要么它对我来说并不明显。

Fiddle:

https://jsfiddle.net/a913q0mz/

CKEditor 4 - 删除图像工具栏按钮导致图像对话框不再显示宽度和高度属性

CKEditor 4 - Removing Image Toolbar Button Causes Image Dialog to No Longer Display Width and Height Properties

ckeditor

ckeditor4.x