Свой стиль для визуального редактора — плагин Advanced TinyMCE

[ ←Вернуться к стандартному виду ]

Печатная версия

Как создать свой стиль для визуального редактора, если вы используете плагин Advansed TinyMCE

Тут про Advanced TinyMCE я уже писала, также есть русифицированная версия этого плагина.

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

Визуальный редактор - 1

Для того, чтобы картинка не «висела топориком», в свой стиль для визуального редактора можно добавить классы для картинок (обтекание, цвет рамки, отступы и т.п.) и легко их (классы) менять:

Визуальный редактор - 2

Тут видно, что для картинок доступны несколько классов: я использую плагин Flexible Upload, в нем уже прописаны классы imgframe, imgaligncenter, imgalignleft и imgalignright, поэтому для картинок я использую именно их.

Классы начинающиеся с mce_plugin_ являются служебными, так что на них можно не обращать внимания.

При вставке картинки из встроенного загрузчика (плагин Flexible Upload активирован, стили прописаны) мы получаем сразу нужное «местоположение» картинки, или меняем класс у картинки в любой момент:

Визуальный редактор - 3

Таким же образом можно оформлять цитаты, текст ссылок, вид списка (ul, ol), таблицы и свои классы для html элементов.

Визуальный редактор - 4

Визуальный редактор - 5

Свой css класс p.title для параграфа: ставим курсор в нужное место, затем идем в (Styles) «Стили» и выбираем нужный класс

Визуальный редактор - 7

Для этого достаточно взять нужные правила из файла style.css (в папке Темы) и вынести их в отдельный файл, назовем его viz.css (возможно прийдется кое-где использовать !important и другие размеры шрифтов — «на глазок») и положем в папку Темы, затем впишем полный путь к файлу viz.css в настройки Advanced TinyMCE, чистим кэш браузера (для FF) и наслаждаемся!

Визуальный редактор - 6


Оставить комментарий »

  1. # Bolton 21.02.2008 в 08:25

    Плагин хорош, правда вот не знаю как его эффективнее всего использовать...

  2. # Шуркин 01.04.2008 в 21:29

    Полезный плагин!
    Вопрос: есть ли разница данного плагина с плагином TinyMCE Advanced?
    На вопрос навела значительная разница версий (Описываемый Вами плагин v0.5.0, а приведенный по ссылке version 3.0)

    А так же вопрос по поводу стилей:
    - к примеру у меня есть свой стиль sampleCSS.css с различными классами, например, с оформлялкой картинок, выравниваниями, цветами заголовков и тп.
    - прописываю путь к данному стилю через соотв. меню в настройках данного плагина.
    - создаю записть. в редакторе в поле стили CSS присутствуют классы подключенного стиля.
    - оформляю запись классами подключенного стиля. Все в ажуре :-)…
    - до тех пор, пока не нажмешь “Сохранить” либо опубликовать.
    - после сохранения\публикации все оформление слетает, в HTML кодинге страницы отсутствуют классы, которыми я делал оформление.

    В чем моя ошибка? В том, что при окончательном выводе\публикации\сохранении WP перепрописывает стиль стилем из текущей темы, и удаляет все оформление?
    Как выйти из этой проблемой? Прописать в настройках редактора путь к стилю темы и изменить\добавить свои классы?

    Большущее спасибо за ответ.

  3. # sonika (300) 01.04.2008 в 23:50

    UPD Шуркин, обе ссылки ведут на скачку плагина версии 0.5.0. Файл viz.css должен содержать те же правила и классы, что и файл style.css вашей Темы. С тем, чтобы проставленные классы вообще пропадали я не сталкивалась.

  4. # Bolser (1) 03.09.2008 в 01:02

    Не знаю одно и то же ли это (слова местами изменены), но я пользую этот плагин.

  5. # Азамат (1) 26.07.2010 в 11:45

    я вот никак не найду способ поставить урезанную версию TinyMce в форму для коментариев как у вас((( можно ли такое?? Именно TinyMce нужно

  6. # sonika (300) 11.08.2010 в 11:43
  7. # Anna 16.12.2011 в 14:05

    А у меня нету настройки где можно вписать свой путь к css! ((((
     
     

Подписаться на фид.
RSS комментариев к этой записи. | TrackBack URI

Написать комментарий


Все саттелиты — в топку! Даже не сомневайтесь. Для вопросов о вордпресс не по теме поста есть два русскоязычных форума по wordpress.


Warning: Illegal string offset 'solo_subscribe' in /var/www/sonika/data/www/sonika.ru/blog/wp-content/plugins/subscribe-to-comments.php on line 304

Подписаться, не комментируя

[ ←Вернуться к стандартному виду ]

Печатная версия