В CKEditor, как я могу добавить ярлык "текст" к кнопке?

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Как и для кнопки "Источник", вы должны использовать CSS, чтобы показать свою метку.

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

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

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

Ответ 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;
}

Ответ 3

.cke_button_label.cke_button__CMDNAMEHERE{
   display: inline;
}

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

вы можете разместить его в любом месте своего собственного css

Ответ 4

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

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

.cke_button__source_label,
.cke_button__sourcedialog_label
{
    display:inline
}

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

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

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