TinyMCE, опции и конфигурации

Система управления сайтом HostCMS для визуального редактирования информации использует редактор TinyMCE (подключаемый как внешний модуль), разработанный Tiny Technologies, Inc. Установить дополнительные версии и редакторы вы можете через магазин приложений.

Исходные коды визуального редактора TinyMCE размещены в директории, соответствующей версии редактора, например /modules/wysiwyg/driver/tinymce6/.

Указание фона визуального редактора

Визуальный редактор применяет фон и стиль текста из CSS-стилей макета. В некоторых случаях при особенностях верстки желательно указать цвет фона и стиль текста, для этого можно воспользоваться следующим стилем, который необходимо добавить в CSS для требуемого макета:

.mce-content-body {
	background: white;
	color: #000;
}

До версии HostCMS 6.6.7 использовалось body.mceContentBody

Если необходимо переопределить стили других элементов, то дополнительно определите их в CSS-стиле макета, например:

.mce-content-body {
	background: white;
	color: #000;
}

.mce-content-body ul {
    margin-bottom: 3pt;
    margin-top: 3pt;
}

.mce-content-body li {
    list-style: outside none disc;
    margin-left: 35px;
}

Конфигурация визуального редактора

Конфигурация визуального редактора зависит от версии, для версии 6 размещена в файле modules/wysiwyg/config/tinymce6.php и содержит параметры его инициализации.

Указание стиля для body редактора

В случае, если контент на вашем сайте отображается внутри блока с определенным стилем, например внутри <div class="myclass">здесь текст</div>, то укажите редактору этот стиль в опции body_class:

    'body_class' => '"myclass"',

Скрытие части кнопок

Для скрытия части кнопок интерфейса используйте опцию toolbar_mode в значении "sliding", чтобы показать все опции сразу укажите "wrap"

    'toolbar_mode' => '"sliding"',

Вставка блочных элементов внутри строчных

Стандартно вставка блочных элементов, например, <div> внутрь <a>, не допускается. Для разрешения такой вставки необходимо внести следующие изменения в конфигурацию визуального редактора:

    //'forced_root_block' => '"p"',
    'forced_root_block' => 'false',
    'valid_children' => '"+body[style],+a[div|h1|h2|h3|h4|h5|h6|p|#text]"',

Вставка тега <p> для первого абзаца

Начиная писать текст в визуальном редакторе, он стандартно оборачивается в тег первого абзаца <p>, чтобы исключить такое поведение внесите следующие изменения в конфигурацию визуального редактора:

    //'forced_root_block' => '"p"',
    'forced_root_block' => 'false',
    'force_p_newlines' => 'false',

Вставка тега <meta> в тексте документа

Стандартно визуальный редактор вырезает теги <meta> из документа. Для изменения данного поведения нужно внести изменения в конфигурацию визуального редактора:

'extended_valid_elements' => '"meta[*],i[*],noindex[*]"',
'valid_children' => '"+body[style|meta],+a[div|h1|h2|h3|h4|h5|h6|p|#text]"',

Если хотите добавлять <meta> в определенных тегах, то расширьте правило. Например, добавление в <footer>:

'valid_children' => '"+body[style|meta],+footer[meta],+a[div|h1|h2|h3|h4|h5|h6|p|#text]"',

Вставка данных из Word

С версии редактора TinyMCE 6 плагин paste стал частью ядра TinyMCE. Разработчики предлагают PowerPaste плагин с ежемесячной оплатой.

С версии HostCMS 7.0.7 в поставку редактора включен плагин paste, которые осуществляет улучшенную вставку данных из Word (как в TinyMCE 5.x версии), активировать его в можете в списке плагинов.

Запрет на удаление пустых тегов <i> с иконками

'protect' => '[/<i[^>]*><\/i>/g]',

Использование SVG

К версии TinyMCE 6.8.0 выпущено следующее изменение: SVG elements and their children are now retained when configured as valid elements. #TINY-10237

В список запрещенных тегов редактора сейчас внесены: 'animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use'.

Согласно комментарию разработчиков к проблеме 9184 "TinyMCE filters out some of the SVG to limit XSS attacks. Please consult our security guide for more information and potential options."

Файловый менеджер визуального редактора

Конфигурация файлового менеджера визуального редактора размещена в файле modules/wysiwyg/filemanager/config/config.php и содержит следующие настройки:

• thumbnails — выводить уменьшенные изображения файлов, по умолчанию TRUE;
• parallelUploads — количество параллельно загружаемых изображений, по умолчанию 10;
• maxFilesize — максимальный размер файла (в мегабайтах), загружаемого в файловом менеджере при параллельной загрузке.

Комментарии