В CKEditor, как я могу добавить «текстовую» метку для кнопки?

Question

editor.ui.addButton( 'ImageUpload',{
                label: 'Upload Image',
                command: 'popup_image_uploader',
                icon: this.path + 'images/icon.png'
            });

Это мой текущий код прямо сейчас. Когда вы загружаете страницу, вы видите только значок.

Но если вы перейдете к демонстрации здесь , вы увидите, что «Источник» - это текст. Я хочу добавить слово «Загрузить изображение» рядом со значком.

Answer 1

Метка для кнопок панели инструментов CKeditor имеет класс .cke_label , который по умолчанию имеет display:none, поэтому кнопки имеют только значки:

.cke_skin_kama .cke_button .cke_label {
    ...
    display: none;
    ...
}

Как и для кнопки Source , вы должны использовать CSS, чтобы показать свой ярлык.

Обычно при создании кнопки CKeditor добавляет класс, подобный .cke_button_CMDNAMEHERE, где CMDNAMEHERE - имя вашей команды. Итак, у вас будет:

.cke_skin_kama .cke_button_CMDNAMEHERE .cke_label {
   display: inline;
}

Проверьте html-источник, чтобы увидеть точное имя добавленного класса и соответствующим образом настроить правило CSS.

Answer 2

другим решением было бы просто использовать псевдокласс css ": before" или ": after", чтобы добавить пользовательский контент до / после кнопок.

, например, настраивая кнопку "link":

создать некоторое пространство (зависит от длины содержимого):

.cke_button_icon.cke_button__link_icon {
padding-right: 25px;
}

добавить содержимое:

.cke_button_icon.cke_button__link_icon:after {
content: "Link";
position: relative;
left: 15px;
}

Answer 3

.cke_button_label.cke_button__CMDNAMEHERE{
   display: inline;
}

будет работать для всех скинов, в отличие от ответа выше (обратите внимание на двойное подчеркивание между кнопками и CMDNAMEHERE)

вы можете разместить его где угодно в вашем собственном css

Answer 4

В текущем ckeditor (4.6.x) ответы выше не работают для меня.

Я покопался в ckeditor / skins / moono-list / editor.css и выполнил поиск "source", чтобы найти, как они сделали кнопку Source, в которой есть текст.Я нашел это:

.cke_button__source_label,
.cke_button__sourcedialog_label
{
    display:inline
}

Обратите внимание, что здесь есть ДВА подчеркивания перед названием вашей пользовательской кнопки.Когда я попробовал только с одним подчеркиванием, это не сработало.

В любом случае, вы бы заменили "source" или "sourcedialog" выше на все, что захотите, и добавили бы это в свой собственный файл css.

ДополнительноКажется, он работает только для имен кнопок, которые полностью строчные .