Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2021, 13:50
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

tinymce 5 присвоить класс кнопки
Привет. Хочу добавить свою кнопку в этот редактор. Делаю в виде плагина.
tinymce.PluginManager.add('gallery', function (editor, url) {

....

    editor.ui.registry.addButton('gallery', {
        tooltip: 'Из альбома',
        icon: 'gallery',		
        onAction: function () {
            load(openDialog);
        },
		
    });

....

});

Подскажите как добавить класс к этой кнопки? Так же интересует,как вместо иконки вставить своё избражение или просто текст. Пробовал вместо icon использовать image не прокатило.
Ответить с цитированием
  #2 (permalink)  
Старый 24.09.2021, 17:50
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

Читайте документацию.
https://www.tiny.cloud/docs/ui-compo...oolbarbuttons/ :
Цитата:
Name of the icon to be displayed. Must correspond to an icon: in the icon pack, in a custom icon pack, or added using the addIcon API.
https://www.tiny.cloud/docs/api/tiny...istry/#addicon
Также в onSetup приходит элемент кнопки - там можно ей поставить класс.
__________________
29375, 35

Последний раз редактировалось Aetae, 24.09.2021 в 17:53.
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2021, 21:55
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Сообщение от Aetae
Читайте документацию.
Нет там ничего(.
Ответить с цитированием
  #4 (permalink)  
Старый 28.09.2021, 22:13
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

ureech, ссылки которые я дал - это "ничо"? 0_о
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 29.09.2021, 10:33
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Как назначить класс для кнопки? Нет.
В четвёртой версии вроде можно было так

editor.ui.registry.addButton('gallery', {
        tooltip: 'Из альбома',
        text: button_text,
        classes : 'my_class',	// для 4-ой
        onAction: function () {
            load(openDialog);
        },

В пятой не работает. Плюс у меня не иконка, а текст

Последний раз редактировалось ureech, 29.09.2021 в 10:39.
Ответить с цитированием
  #6 (permalink)  
Старый 29.09.2021, 13:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Aetae
Также в onSetup приходит элемент кнопки - там можно ей поставить класс.
можно пример? кроме buttonApi я там ничего не вижу.
Ответить с цитированием
  #7 (permalink)  
Старый 29.09.2021, 17:22
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

рони, да, нет нифига.)
Если без иконки, то походу только монкипатчить через что-то типа: button.tox-tbtn[label="Из альбома"].
Цитата:
It is by design that there is currently no option to add styles or classes to custom components. It is to maintain the uniformity in look and feel of the TinyMCE UI.
...upd:
В text можно пихать html, а значит нет проблемы сделать так:
text: '<span class="my_class">' + button_text +'</span>'


...upd2 накидал функцию, добавляющую classes:
function addButton(editor, name, {
  classes, 
  _posAttr = 'data-temp-button-index', 
  ...options
}) {
  const registry = editor.ui.registry;

  if(!classes)
    return registry.addButton(name, options);
  classes = String(classes).split(/\s+/);

  const attr = `${_posAttr}="${addButton.index++}"`;
  const text = `<span ${attr}"></span>`;
  const selector = `span[${attr}]`;
  const hasText = 'text' in options;

  const removePosEl = hasText ? posEl => posEl.remove() : posEl => posEl.parentNode.remove();
  const addClasses = () => {
    const el = editor.getContainer().querySelector(selector);
    el.closest('button').classList.add(...classes);
    removePosEl(el);
  };
  const {onSetup} = options;

  return registry.addButton(name, {
    ...options,
    text: hasText ? options.text + text : text,
    onSetup: typeof onSetup === 'function' ? function() {
      addClasses();
      return onSetup.apply(this, arguments);
    } : addClasses
  });
}
addButton.index = 0;

//...

addButton(editor, 'gallery', {
  tooltip: 'Из альбома',
  text: button_text,
  classes : 'my_class',	
  onAction: function () {
    load(openDialog);
  }
})
__________________
29375, 35

Последний раз редактировалось Aetae, 29.09.2021 в 23:16.
Ответить с цитированием
  #8 (permalink)  
Старый 29.09.2021, 22:30
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Aetae,
Спасибо. Попробую разобраться). Насчёт html в text
Сообщение от Aetae
text: '<span class="my_class">' + button_text +'</span>'
так стили только текста коснуться, а не кнопки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать присвоить класс div при множественном условии admin'ko Элементы интерфейса 1 26.10.2019 06:35
Если input заполнен присвоить класс родителю div dasha862 jQuery 22 06.09.2017 14:30
Присвоить input name такой же как класс у div alex-tiesto jQuery 2 05.03.2017 01:01
Как выбрать элемент по классу и присвоить ему еще один класс? Ikles Events/DOM/Window 8 18.11.2016 13:34
Присвоить один класс рандомно для списка элементов moslem jQuery 2 02.04.2016 14:44