2

CKEditor的工具栏可以做得更小吗？身高和体重属性只会改变编辑器的大小，但我想改变工具栏的大小。

4

5 回答 5

3

您始终可以找到包含工具栏的 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/

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

于 2014-03-19T07:47:36.287 回答
1

为了在 IE9 中获得正确的宽度而不更改任何其他样式，我将缩放应用到 .cke_toolbar

.cke_toolbar {
    zoom: 0.8;
}

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

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

于 2014-06-19T12:58:41.220 回答
1

我也需要为我的应用程序缩小工具栏。这就是我所做的。

.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。

于 2016-01-15T22:41:12.263 回答
0

没有。这种事情没有官方支持。不过，您可以自行修改编辑器的皮肤并最终重新构建编辑器。

于 2013-06-04T22:14:19.723 回答
0

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

希望这个答案对有类似要求的人有用！

.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;
}

用于 CKE-ing 字段设置为：

<textarea class="rte compact"></textarea>
于 2015-06-29T14:30:43.253 回答