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

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

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

    Что мы тут делаем? Мы задаём базовые настройки, которые будут использоваться для всех инстансов, и если в конфиге, переданном как параметр функции, есть дополнительные опции (например, подключение доп. плагинов, как в примере через extra_plugins), то мы расширяем основные настройки, используя затем их для инициализии через tinymce.init
    Стоит заметить, что используется не selector: ‘.classname’, а именно target: domElement, который, как уже ясно, использует конкретный DOM-элемент, переданный в параметре config.
  2. Инициализируем tinymce для каждого textarea на странице, беря настройки из data-* атрибутов (в примере используется jquery)

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

 

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

 

Добавить комментарий

Ваш e-mail не будет опубликован.