Заметки Вебмастера

Познаём Новые Технологии

настройка стилей tinymce

TinyMCE. Настройка Стилей

В этой заметке вы найдёте ответ на вопрос «Как настроить TinyMCE, чтобы текст внутри редактора отображался как на сайте?» или «Как подключить стили сайта к редактору TinyMCE?»

Настройка Стилей

1. Подключаем стили сайта к редактору TinyMCE.

Для этого в настройках редактора добавляем следующий код:

tinyMCE.init({
        ...
        content_css:"/mycontent.css"
});

Если у вас на сайте подключено несколько стилей, или для разных страниц требуются отдельные файлы, то можно добавить их перечислением:

tinyMCE.init({
        ...
        content_css : "mycontent.css,mycontent2.css" 
});

Так же можно добавить несколько файлов css массивом:

tinyMCE.init({
        ...
        content_css : ["mycontent.css","mycontent2.css"]
});

Если вы собираетесь изменять уже подключенные файлы css, то добавьте к ним любой параметр, чтобы обновить кэш:

content_css : "csspath/mycssfile.css?ver=" + new Date().getTime(),

или

content_css : "csspath/mycssfile.css?abc=" + new Date().getTime(),

Ссылка на документацию content_css

 

2. Подключаем классы к редактору TinyMCE.

Добавляем к элементу body редактора TinyMCE те классы, от которых наследуются все стили сайта и строятся селекторы в ваших css файлах, например: content или wrapper

tinymce.init({
        ...
        body_class: "my_class1"
});

Можно сразу добавить все классы:

tinymce.init({
        ...
        body_class: "my_class content wrapper"
});

Чтобы добавить специальные классы для отдельных элементов редактора TinyMCE, необходимо их перечислить:

tinymce.init({
        ...
        body_class: "elm1=my_class, elm2=my_class"
});

Ссылка на документацию body_class

После этих настроек, любой текст в редакторе TinyMCE будет отображаться точно также как и на сайте.

, , , , ,

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

 

Ваш e-mail не будет опубликован. Обязательные поля помечены *