TinyMCE 4. Управляем настройками редактора через data-* атрибуты HTML
Без рубрики
Published: 2018-03-26

Представьте, что у вас есть сайт. А на этом сайте у вас подключен TinyMCE. Да подключен не к одному textarea, а к пачке разных, и надо сделать так, чтобы на разных textarea были разные настройки. Что в первую очередь приходит в голову? Правильно! Наделаем разных классов и будем по css-селекторам создавать разные инстансы. А что получим в итоге? Тоже правильно! Лапша в коде

Сделаем по-умному

  1. Обернём инициализацию в функцию

    function initTinymce(config) {
    
        var targetSelector = config['target'];
    
        var plugins = [
            'paste',
            'autolink',
            'autosave',
            'autoresize',
            'code',
            'image',
            'link',
            'lists',
            'noneditable',
            'textcolor',
            'visualchars',
            'wordcount',
            'media'
        ];
    
        /* Базовые общие настройки */
        var tinymceSettings = {
            target: targetSelector,
            language: 'ru',
            plugins: plugins,
            toolbar1: 'paste | bold italic underline | link image media | code'
        };
    
        if (config['extra_plugins'] !== undefined && config['extra_plugins'].indexOf('spellchecker') >= 0) {
            tinymceSettings.plugins.push('spellchecker');
            tinymceSettings.spellchecker_languages = "Russian=ru,Ukrainian=uk,English=en";
            tinymceSettings.spellchecker_language = "ru";
            tinymceSettings.spellchecker_rpc_url = "//speller.yandex.net/services/tinyspell";
            tinymceSettings.toolbar2 = 'spellchecker';
        }
    
        return tinymce.init(tinymceSettings);
    }
    

    Что мы тут делаем? Мы задаём базовые настройки, которые будут использоваться для всех инстансов, и если в конфиге, переданном как параметр функции, есть дополнительные опции (например, подключение доп. плагинов, как в примере через extra_plugins), то мы расширяем основные настройки, используя затем их для инициализии через tinymce.init

    Стоит заметить, что используется не selector: ‘.classname’, а именно target: domElement, который, как уже ясно, использует конкретный DOM-элемент, переданный в параметре config.

  2. Инициализируем tinymce для каждого textarea на странице, беря настройки из data-* атрибутов (в примере используется **jquery**)

    if ($('textarea.tinymce').length > 0) {
        $('textarea.tinymce').each(function() {
            var config = {},
                plugins = $(this).data('tinymce-plugins');
            config.target = this;
            config.extra_plugins = plugins ? plugins.split(',') : [];
            initTinymce(config);
        });
    }
    

А что мы делаем тут? Проверяем наличие на странице textarea с классом tinymce, после чего перебираем их и для каждого индивидуально создаём объект config = {}, куда запихиваем наш DOM-элемент как target и все доп. плагины, перечисленные в data-tinymce-plugins через запятуюю. Затем инициализируем редактор, передавая наш конфиг в функцию initTinymce(), созданную ранне

Сам textarea в html-воде может выглядеть примерно так

<textarea class="tinymce" spellcheck="false" data-tinymce-plugins="spellchecker" cols="50" rows="10">

 

comments powered by Disqus