Question

是否可以将CKEditor的工具栏缩小？高度和重量属性只会改变编辑器的大小，但我想更改工具栏的大小。

Answer 1

您始终可以找到包含工具栏的div并设置zoom。

例如，在我的cfkEditor测试中，我发现cke_top用于工具栏，我只是添加了这个css：

.cke_top
{
    zoom:0.8;
}

我在这里找到了一个这个编辑器的随机例子：http://jsfiddle.net/mgifford/C7N7r/

这里我应用了以上样式：http://jsfiddle.net/C7N7r/54/

一个错误是下拉列表没有在正确的位置打开。

要解决这个问题，我还要找到已打开的面板并在那里添加缩放，但到现在为止它还没有那么好用。

.cke_combopanel
{
    zoom:0.85;
}

.cke_panel_frame
{
    zoom:0.8;
}

和决赛：http://jsfiddle.net/C7N7r/225/

因此，您可以在较小版本的工具栏上使用该技巧而不使用下拉列表。

Answer 2

要在IE9中调整宽度而不更改任何其他样式，我将缩放应用于.cke_toolbar

.cke_toolbar {
    zoom: 0.8;
}

为了保持一致性，您可以将它放在editor.css和editor_ie.css中，当然，您真正需要的只是IE浏览器。

http://jsfiddle.net/C7N7r/74/

Answer 3

我还需要为我的应用设置更小的工具栏。这就是我所做的。

.cke_top { padding: 6px 0 0 6px !important; }
.cke_voice_label,
.cke_button_label,
.cke_combo_label { display: none !important; }
a.cke_button { padding: 3px 4px !important; }
.cke_combo_text { padding-left: 6px !important; line-height: 24px !important; }
.cke_combo_open { height: 18px !important; line-height: 16px !important;}
.cke_combo_arrow { margin: 10px 0 0 !important; }

CKEditor的版本是4.5.6。

Answer 4

不。对此类事情没有官方支持。不过，您可以自行修改editor's skin，最后re-build the editor。

Answer 5

这个问题对于期望的结果有点模棱两可;我只需要为具有有限功能的编辑器创建一个更紧凑的工具栏，而这种编辑器无论如何都不会被设想使用。默认样式添加了大量填充，在这种情况下并不是必需的;以下样式将消除它，同时仍然看起来合理。

希望这个答案对于有类似要求的人来说非常有用！

var filter = this.value.trim().toLowerCase();
function FilterItems(items){
    return items.filter(function(){ return $(this).attr('data-name').toLowerCase().indexOf(filter) > -1;});
}

用于对设置为：

的字段进行CKE

.rte.compact + .cke .cke_top {
    padding: 1px;
}

.rte.compact + .cke .cke_toolgroup {
    margin: 0px;
    margin-right: 1px;
    border: none;
    border-radius: 0px;
}

.rte.compact + .cke .cke_toolbar_separator {
    height: 12px;
}

.rte.compact + .cke .cke_toolgroup a {
    display: inline-block;
    padding: 2px;
}

如何更改CKEditor工具栏的大小？

5 个答案: