TinyMCE добавляет стиль toggle

Question

Я работаю над плагином TinyMCE, и одна вещь, которую я хочу сделать, это зарегистрировать команды/кнопки, которые переключают пользовательское форматирование.

Например, если вы нажмете жирную кнопку в TinyMCE, она отобразит выделенную жирным шрифтом выделенную жирным шрифтом. Копаясь в исходном коде, я вижу, что это происходит через: tinymce.EditorCommands.addCommands подумал, что я не могу понять, как его дублировать. Документация TinyMCE также ужасна: (

Так что заданный пользовательский формат Я хочу, чтобы у меня была настройка кнопки моим плагином, когда при применении customFormat он отображается как таковой, как Bold, Italic и другие подобные кнопки на панели инструментов, и нажатие на мой customFormat переключает этот формат вкл/выкл. Я легко могу выполнить работу с помощью «addCommand» и «addButton», но тогда у него нет отслеживания состояния, например, Bold и других.

Показывая мою текущую нерабочую попытку (этот код находится внутри init моего метода создания плагина):

tinymce.EditorCommands.call('addCommands', { 
    'MyFormat' : function(name) { 
     ed.formatter.toggle("customFormat"); 
    } 
},'exec'); 

tinymce.EditorCommands.call('addCommands', { 
    'MyFormat' : function(name) { 
     return ed.formatter.match('customFormat'); 
    } 
},'state'); 

ed.addButton('customformat', {cmd : 'MyFormat'}); 

А вот ссылка на «документации» из addCommands: http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

После намного больше поисков я нашел это что кажется идеальным: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

Но когда я реализую код Безразлично» т изменять состояние кнопки:

ed.addCommand('MyFormat', function(ui, v) { 
    ed.formatter.toggle("thoughtFormat"); 
    }); 

    ed.addQueryStateHandler('MyFormat', function() { 
     return ed.formatter.match('thoughtFormat'); 
    }); 

    ed.addButton('myformat', {cmd : 'MyFormat'}); 

Answer 1

В случае, если кто-то не хочет, чтобы сделать это «плагин» путем, вот руководство для TinyMCE 4.x.

Прежде всего, необходимо определить пользовательский формат:

formats: { 
    custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}} 
} 

Тогда вам придется добавить кнопку на панель инструментов:

toolbar: "mybutton", 

Далее, вам нужно настроить ваш кнопка, так что она переключает формат:

setup: function(editor) { 
     editor.addButton('mybutton', { 
      text: 'My button', 
      icon: false, 
      onclick: function() { 
       tinymce.activeEditor.formatter.toggle('custom_format') 
      } 
     }); 
} 

Кроме того, если вы хотите, чтобы редактор, чтобы установить состояние кнопки указать формат текущего узла автоматически, добавьте в setup функции:

onPostRender: function() { 
    ctrl = this,     
    editor.on('NodeChange', function(e) { 
     ctrl.active(e.element.className == "some_css_class") 
    }); 
} 

Ваша tinymce.init функция должна выглядеть следующим образом:

tinymce.init({ 
    selector: "textarea", 
    formats: { 
     // Other formats... 
     custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}} 
    } 
    // Other default toolbars 
    toolbar_n: "mybutton", 

    // Finally, setup your button 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      text: 'My Button', 
      icon: false, 
      onclick: function() { 
       tinymce.activeEditor.formatter.toggle('custom_format') 
      }, 
      onPostRender: function() { 
       ctrl = this,     
       editor.on('NodeChange', function(e) { 
        ctrl.active(e.element.className == "dynamic-field") 
       }); 
      } 
     }); 
    } 

Обратите внимание, что class атрибут я добавил в мой пользовательский формат. Такой подход позволил мне определить мои пользовательские стили в отдельном файле стилей и сохранить мою разметку как можно более сухой (нет встроенного стиля!). Пункт content_css вариант вашей таблицы стилей, и вам будет хорошо идти. Однако из-за того, что я использую Rails в качестве back-end и BatmanJS в качестве интерфейсного (и я довольно новичок в последнем), я не мог понять, как работает маршрутизация активов, и в итоге добавили мои пользовательские стили в файл таблицы стилей содержимого по умолчанию для самого крошечного самма (расположенный по адресу skins/SKIN_NAME/content.min.css).

Answer 2

Вот пример:

ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever 

Answer 3

Спасибо Thariama за понимание, которое позволило мне копать глубже, наконец, выяснить, как это сделать. Я не уверен, что это «правильный путь», но, как я уже сказал, TinyMCE имеет самую худшую документацию, которую только можно себе представить.

Ключ для меня - сделать крючок событием onNodeChange, используя setActive трюк. Полный пример плагин с настраиваемой кнопкой, которая активируется, когда этот формат присутствует везде, где курсор находится:

(function() { 
    tinymce.create('tinymce.plugins.CoolPlugin', { 
    init : function(ed, url) { 

     ed.addCommand('MyFormat', function(ui, v) { 
     ed.formatter.toggle("myFormat"); 
     }); 

     ed.addButton("coolformat", { 
     title : 'MyFormat Tooltip', 
     cmd : 'MyFormat', 
     image: url + '/coolformat.png', 
     }); 

     ed.onNodeChange.add(function(ed, cm, n) { 
     active = ed.formatter.match('myFormat'); 
     control = ed.controlManager.get('coolformat').setActive(active); 
     }); 

     ed.onInit.add(function(ed, e) { 
     ed.formatter.register('myFormat', 
      {inline: 'span', classes : ['cool'] }); 
     }); 
    } 
    }); 

    // Register plugin 
    tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin); 
})();