Как изменить размер панели инструментов CKEditor?

Question

Возможно ли сделать панель инструментов CKEditor меньше? Атрибуты высоты и веса изменяют только размер редактора, но я хочу изменить размер панели инструментов.

Answer 1

Nope. Официальной поддержки такой вещи нет. И все же, вы можете изменить editor's skin самостоятельно и в конечном итоге re-build the editor.

Answer 2

Вы всегда можете найти 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 3

Чтобы получить ширину права в IE9 без изменения каких-либо других стилей я применил зум .cke_toolbar вместо

.cke_toolbar { 
    zoom: 0.8; 
} 

Для консистенции вы можете поместить его в обоих editor.css и editor_ie.css, хотя все, что вы на самом деле нужно, конечно, в IE.

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

Answer 4

Этот вопрос немного неоднозначным, как к желаемому результату; Мне просто нужно было создать более компактную панель инструментов для редактора с ограниченной функциональностью, которая не предполагается использовать, что часто так или иначе. Стили по умолчанию добавляют много дополнений, в этом нет необходимости в этом случае; следующие стили устраняют его, сохраняя при этом разумные результаты.

Надеюсь, этот ответ будет полезен людям, которые попадают сюда с аналогичными требованиями!

.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-ки с полем, создаваемым как:

<textarea class="rte compact"></textarea> 

Answer 5

мне нужно, чтобы сделать панель инструментов меньше для моего приложения тоже. Вот что я сделал.

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