Наверх

Использование предустановленных шаблонов для TinyMCE

Сегодня с помощью Артура Цыбы обнаружил в TinyMCE интересную фишку.

Оказывается, этот редактор позволяет заранее подготовить набор блоков, которые в дальнейшем смогут использовать пользователи (контент-менеджеры).
Шаблоны должны храниться в виде html-файлов. Я, например, создал в корне сайта папку templates и в ней файл image.html:
<div style="overflow: hidden;">
    <div style="float: left; text-align: center; padding: 1em 9px 0 0;">
        <img src="/manager/templates/default/images/modx-icon-color.png" style="display: block; margin: 0 5px;">
        <p style="color: #666; margin: 1em 0 0;">Подпись</p>
    </div>
    <p>Текст справа от картинки.<br />
    Если текста будет много, он будет «обтекать»<br />
    картинку и подпись к ней,<br />
    так чтобы блок всегда выглядел<br />
    симпатично.</p>
</div>
<p>Текст после картинки</p>

Для того, чтобы эти шаблоны использовать, нужно, во-первых, включить плагин для TinyMCE, во-вторых, вынести кнопку на панель и, в-третьих, составить список шаблонов.

Для этого заходим в Настройки системы, выбираем пространство имен TinyMCE и дописываем в пунктах Custom Plugins и Custom Buttons Row 2 через запятую слово template.

Список шаблонов указывается в параметре Template List в таком формате:
Картинка с текстом:templates/image.html,Цитата:templates/quote.html

После этих манипуляций, на странице редактирования ресурса появится кнопка выбора и вставки шаблонов.


12 комментариев

  1. Burick 30 декабря 2015, 19:36 # +1
    Здорово, можно например подготовить макет 2-3-4 колонки и пусть себе заполняет, а то приходилось дополнительными полями реализовывать спасибо, утащил в копилку)
    1. Павел 13 января 2016, 12:09 # 0
      Классная фишка. Но что-то не получается вставить шаблон. Кнопку в редактор добавил, при вставке шаблона предлагает выбрать шаблон, но ничего в списке шаблонов не выводится.
      Я использую typoMCE. У него тоже есть аналогичный параметр — typo.template_list. По идее все должно работать. В typo.template_list указал шаблон как в вашей статье, создал папку с файликом .html в корне, но список шаблонов пуст. Также пробовал создать папку в той же директории, где лежит сам исполнительный .js-файл typoMCE (assets/components/typomse/jscripts/tiny_mce), но безрезультатно. Может все дело в путях? Откуда tinyMCE считает путь?
      1. Илья Уткин 13 января 2016, 12:19 # 0
        У меня был какой-то глюк, если в шаблоне есть классы
        <div class="test">
        Может, в этом дело
        1. Роман 23 апреля 2019, 11:26 # 0
          Да, с классами не вставляет блоки. Интересно можно ли как-то это обойти.
          1. naman 02 мая 2019, 08:15 # 0
            tiny.template_selected_content_classes .fakeCssClass
            1. Роман 06 мая 2019, 10:46 # 0
              Помогло, если название класса начинается с mce
              1. naman 06 мая 2019, 10:48 # 0
                У меня любое имя класса срабатывает, главное чтобы с точки начиналось
                1. Роман 06 мая 2019, 10:53 # 0
                  Просто если назвать с mce, то не нужно добавлять в tiny.template_selected_content_classes, а так да, работает, про точку не сразу понял, но потом протестировал, вроде бы все круто.
        2. Павел 13 января 2016, 12:51 # 0
          насколько я понимаю, список шаблонов формируется в этом файле — assets/components/typomse/jscripts/tiny_mce/plugins/template/js/template.js(5-я строка):
          var url = tinyMCEPopup.getParam("template_external_list_url");
          По идее, этот параметр попадает в tinymce таким способом (core/components/typomse/typomce.class.php):
          'template_external_list_url' => $this->config['assetsUrl'] . 'template.list.php',
          Но в папке assets нет файлика template.list.php. Это баг typoMCE или что? Помогите разобраться.
          1. Илья Уткин 13 января 2016, 12:54 # 0
            Не знаю… Я, честно, сам не пользуюсь ни TinyMCE, ни TypoMCE. =))
            1. vladikulus 05 апреля 2016, 08:57 # 0
              на версии TypoMCE 4.4.0-pl1 действительно баг, в файле
              assets/components/typomce/connector.php
              не переписали пути.

              require_once dirname(dirname(dirname(dirname(__FILE__)))).'/config.core.php';
              require_once MODX_CORE_PATH.'config/'.MODX_CONFIG_KEY.'.inc.php';
              require_once MODX_CONNECTORS_PATH.'index.php';
              
              $tinyCorePath = $modx->getOption('tiny.core_path',null,$modx->getOption('core_path').'components/typomce/');
              require_once $tinyCorePath.'typomce.class.php';
              $modx->tinymce = new TypoMCE($modx);
              
              $modx->lexicon->load('typomce:default');
              
              Если этим заменить должно работать
        3. Вера Михайлова 20 июля 2021, 15:53 # 0
          Спасибо. У меня тоже все получилось

          Авторизация

          через сервис Loginza:


          Шаблоны MODX

          1 2 Дальше »

          Объектная
          модель
          MODX