Редактор TinyMCE имеет множество директив настройки, благодаря которым можно гибко управлять работой редактора. К сожалению, некоторые молодые вебмастера отказываются от использования TinyMCE из-за неумения его настроить, а дефолтные настройки устраивают далеко не всех.

Установка редактора TinyMCE описывается в статье "Установка редактора TinyMCE ", а здесь разберемся с директивами конфигурации редактора. Все директивы конфигурации редактора TinyMCE описаны в документации на домашнем сайте TinyMCE . Здесь разберем некоторые.

Управление поведением редактора в отношении ссылок

• convert_urls - по умолчанию true. Все URL будут конвертироваться в относительные. Действие зависит от следующей директивы.
• relative_urls - по умолчанию true. Все URL будут приведены к домашнему домену.
• remove_script_host - по умолчанию true. Если директива включена, то из урла будут удалены название протокола и хост. Если директива установлена в false, то урлы будут храниться в полном формате: "http://www.example.com/somedir/somefile.htm" вместо: "/ somedir / somefile.htm". Эта директива работает только если relative_urls установлено в false.
• document_base_url - значением по умолчанию является каталог текущего документа. Эта директива определяет базовый URL для всех относительных URL-адресов в документе. Если указывается какое-то значение, то оно должно указать на каталог (не документ) и должно заканчиваться символом "/".

Управление поведением редактора в отношении html тэгов

Директив в этом разделе весьма много и все перечислять смысла нет. Приведу несколько наиболее критичных.

Хотите знать больше? Нажмите "Нравится"

• valid_elements - эта директива определяет, какие html тэги остануться нетронутыми после сохранения документа. Если мы хотим, чтобы все тэги и все атрибуты тэгов не изменялись и не удалялись, указываем *[*]. Если хотим сохранять только некоторые тэги или же заменять одни тэги другими, то перечисляем нужное через запятую "a, b, em, ul, li". Запись "strong/b" разрешает тэг "strong" и заставляет редактор принудительно заменять тег "b" тэгом "strong". Запись "a" разрешает тэг "a" с атрибутом "href" и устанавливает атрибут "target" в значение "_blank". Например: valid_elements: "a,strong/b,div,br".
  
• extended_valid_elements - действие директивы аналогично действию valid_elements с той разницей, что она добавляет тэги к существующему списку. Если в этой директиве встретится тэг уже описанный в valid_elements , он будет переопределен. В настройках лучше использовать именно эту директиву.
  
• invalid_elements - директива прямо противоположная предыдущей. В ней указываются запрещенные тэги, которые будут удаляться редактором из текста. Формат директивы такой же как и у valid_elements .
• cleanup - очистка кода при сохранении документа. Если эта директива установлена в true, то из текста удаляются служебные атрибуты редактора, как то: mce_style, mce_href, mce_src и другие. В этом случае в директиве valid_elements необходимо прописать теги и атрибуты, которые не должны удаляться редактором (такие как noindex, iframe, strong, object, em, embed).

Другие директивы

• gecko_spellcheck - значение по умолчанию false. С помощью этой директивы управляется логика проверки орфографии Gecko/Firefox. Значение true включает внутреннюю проверку орфографии.
• language - явно указывает язык документов. В нашем случае логично указать: "ru".
• inline_styles - по умолчанию true. При установки этой директивы в true, редактор осуществляет преобразование некоторых атрибутов тэгов в css нотации, что приближает кодировку к XHTML стандартам.
• entity_encoding - способ кодирования специальных символов.
  Возможные значения:
  • named - спецсимволы будут кодироваться символьной нотацией, например неразрывный пробел закодируется как
  • numeric - спецсимволы будут кодироваться числовой нотацией, например неразрывный пробел закодируется как
  • raw - спецсимволы кодироваться не будут за исключением & " (& < > ").
• content_css - прикрепляет пользовательский стиль.
• width - директива явно определяет ширину окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.
• height - директива явно определяет высоту окна редактора. Размерность указывается в пикселях, указывать ее явно не надо.
• mode -директива определяет способ подключения редактора к тэгу textarea.
  Возможные варианты:
  • textareas - редактор подключается ко всем тэгам textarea на странице;
    
  • specific_textareas - подключает редактор к textarea, который отмечен классом указанным в директиве editor_selector ;
  • exact подключает редактор к textarea или div, который отмечен id указанным в директиве elements;
  • none - не подключать редактор. Подключение осуществляется функцией tinyMCE.execCommand() .
• skin - определяет "шкурку" вашего редактора (оформление). Сейчас доступно две шкурки: default" и "o2k7".
• theme - директива определяет "тему" (а по сути набор кнопок) редактора. Имеется две встроенных темы: simple и advanced. simple ставит минимальный набор кнопок и возможностей. advanced позволяет управлять набором кнопок. Темы можно создавать самостоятельно.
• plugins - определяет список подключаемых плугинов.
• theme_advanced_toolbar_location - указывает в каком месте будут находиться панели редактора. Возможные значения: "top" или "bottom".
• theme_advanced_statusbar_location указывает в каком месте будут находиться панель статуса. Возможные значения: "top" или "bottom".
• theme_advanced_buttons1 - определяет набор кнопок в панеле (указана цифрой, обычно от 1 до 4) редактора.

Инициализация редактора TinyMCE может быть такой

tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
language: "ru",
inline_styles: true,
convert_urls: false,
relative_urls: false,
remove_script_host: false,
cleanup: true,
extended_valid_elements:"noindex, strong/b, em/i, sup, sub, ul, ol, li, div, span, hr, img, a, iframe, embed, object",

plugins: "pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, wordcount, advlist, autosave",

// Theme options
theme_advanced_buttons1: "undo, redo, |, bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatselect, fontselect, fontsizeselect, sub, sup, |, forecolor, backcolor",
theme_advanced_buttons2: "cut, copy, paste, pastetext, pasteword, removeformat, cleanup, |, search, replace, |, bullist, numlist, |, outdent, indent, blockquote, |, link, unlink, image, |, insertdate, inserttime, hr, |, charmap, emotions, iespell",
theme_advanced_buttons3: "tablecontrols, |, visualaid",
theme_advanced_buttons4: "styleprops, |, cite, abbr, acronym, del, ins, |, visualchars, nonbreaking, |, print, preview, |, fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,

});

Сегодня в телеграм канале MODX написали о том, что редактор TinyMCE Rich Text Editor не умеет то, не умеет этого. Кто-то не сумел его настроить, у кого-то он выдавал ошибки и т.д. Вопрос выбора редактора для меня встал сразу как я перешел на MODX (что напомню случилось не так давно, месяцев 8 назад). Задача стояла одна: сделать простой, удобный и многофункциональный редактор контента. Поигрался с обычным TinyMCE, поигрался с ckeditor, поигрался с TinyMCE Rich Text Editor и решил ковырять последний.

Я не хочу устраивать холивар, какой мол, редактор лучше. Я делюсь готовым решением рабочего и многофункционального редактора. А какой выбирать - решать конечно вам.

История Настройка заняла не так много времени, куда больше времени заняла кастомизация редактора и встраивание нужных функций. Но благо я все таки умею немножко гуглить и нашел среди англоязычных ресурсов несколько полезных тем, с помощью которых у меня получилось реализовать редактор, который в итоге мы и получим.

Сборка прошла без ошибок.

Установка 1) Скачать автоустановщик вы можете с моего новосозданного Git-репозитория .

2) Процесс установки очень прост - закидываем файл tinymcerte-1.0.0-beta.transport.zip в../core/packages/ и через установщик ищем пакет локально. Далее просто устанавливаем его. Настройки автоустановщик установит сам.

3) В папке /files/TinyMCERTE-settings/ , вы можете найти небольшой readme.txt и плагин typograf, который нужно поместить в папку плагинов редактора (об этом читайте в readme.txt). На этом все - редактор готов к использованию.

Предостережения и доработка 1) Я тестировал данный автоустановщик на чистом сайте и сайте без установленного редактора. Как и что произойдет, если установить его на сайт где уже есть редактор (Ace не в счет), я не знаю.

2) Было бы неплохо автоматически помещать папку typograf в нужный раздел, но моих знаний не хватает для реализации этой идеи. Если кто-то захочет помочь - будет круто. Исходники данного автоустановщика я выложу в тот же репозиторий сегодня, но ближе к вечеру.

4) Для проверки орфографии редактор использует сервис yandex.speller . Настройки сервиса вы можете найти в файле../assets/components/tinymcerte/tinymcerte/js/external-config.json. Spellchecker TinyMCE поддерживает огромное кол-во языков для проверки . Тогда как yandex.speller только 3 (русский, украинский, английский).

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

Недавно мне пришлось разрабатывать проект для организации писателей Украины, в которой, безусловно, программистов "очень много", и нужно было искать решение для упрощения интерфейса системы, особенно это касалось написания статей, и прочего редактируемого вручную содержания сайта.

Я испробовал приличное множество систем визуального редактирования, и безусловно о каждой из них у меня сложилось определённое впечатление: как хорошее, так и плохое.

В рамках данного проекта я испробовал три системы визуального редактирования, которые, безусловно, достойны внимания, и будут рассмотрены в данной статье. Это следующие программы: TinyMCE, WYM Editor, HTMLArea.

Ну конечно в один ряд эти программы ставить нельзя, хотя бы по их функционалу и назначению. Это было бы равносильно сравнивать возможности встроенного редактора Notepad и коммерческого Microsoft Word. Ведь каждая эта программа особенная, и относится к определённому классу. Посему сегодня мы поговорим именно о ней.

Сказание о TinyMCE

Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, "портативностью", ассоциативностью, и при всё при этом — относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW — W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.

Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?

Да очень просто, для этого вам сначала необходимо подключить основной класс TinyMCE, после чего в документе автоматически станет доступным прототип объекта TinyMCE, который и является основным API-интерфейсом системы, через который происходит общение с программой, и её настройка.

Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:

Листинг 1.1

Первый пример Некоторый элемент TextArea

В данном простейшем случае в качестве поля для редактирования мы увидим редактор с минимальным набором функций для стандартного форматирования текста, но не больше. Подобный подход можно применить в рамках проекта по созданию чата, форума, гостевой книги и прочего. Для более же сложных вариантов у нас есть дополнительный набор функций и методов, о которых мы сейчас и поговорим.

Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса — init().

Мы передаём в качестве параметра некоторый хеш, в котором значение элемента mode соответствует ‘textareas’, а элемента theme — ‘simple’. Элемент `mode` означает метод "замены" стандартных текстовых полей (textarea), на WYSIWYG. Он может принимать значения ‘textareas’ , ‘exact’ и ‘specify_textareas’.

В случае ‘textareas’ мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.

В свою очередь элемент ‘theme’ означает ничто иное, как текущий тип оформления редактора и может принимать значения: ‘simple’ и ‘advanced’.

В нашем случае, когда мы используем тип ‘simple’, мы подключаем исключительно стандартные функции редактора, и при этом не может особо менять его функционал, как я уже говорил — это вполне сгодится для малых проектов, а так же для тех, в которых необходима высокая скорость соединения.

Теперь давайте рассмотрим работу с редактором во время включённого режима темы ‘advanced’.

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

Что ж, допустим, вы начали проект некоторого электронного журнала или Интернет-издания, в котором принципиальной является возможность создание статей со стороны администрации. При этом следует учитывать, что интерфейс программы должен быть как можно более схожим с привычным для нас интерфейсом наиболее используемого Word’а, а так же иметь достаточное количество функций для воплощения всех идей редактора относительно форматирования текста статьи, и никогда не должно возникать таких вопросов как: "А куда нужно нажать?", "А почему оно не показывает:.", "А куда делся весь текст":

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

1. Автоматическое форматирование вставляемого текста
2. Добавим функции форматирования
3. Изменим расположение панелей управления
4. Зададим язык редактора
5. Добавим проверку орфографии

Что ж, давайте обсудим точнее, что мы хотим увидеть в редакторе:

1. Панель форматирования находится сверху
2. Панель состояния отсутствует
3. Язык редактора — русский
4. Функции форматирования: полужирный, курсив, подчёркивание, шрифт, размер, стиль текста, цвет, заливка.
5. Функции структурного форматирования: таблица, выравнивание, табуляция, список
6. Дополнительные функции: вставка изображения, вставка, предпросмотр, вставка гиперссылки, функции "отката" и "возврата", ну и, наверное, введём печать.

Что ж, формализация задания есть, теперь давайте решим, как мы будем это воплощать в жизнь.

Для воплощения функции авторформата вставляемого извне текста необходимо указать параметр хеш-списка — ‘paste_auto_cleanup_on_paste’, который принимает в качестве значения булев (true || false), и в зависимости от этого форматирует или нет внешний текст, переданный из буфера обмена.

При использовании данного параметра следует так же использовать и следующие параметры:

paste_convert_headers_to_strong: (true | false), paste_strip_class_attributes: "all", paste_remove_spans: (true | false), paste_remove_styles: (true | false)

Ну, я их не озвучиваю, так как их названия и так ассоциативны. Что ж, со вставкой мы проблему решили, и теперь нам необходимо решить ещё несколько задач, поставленных нами ранее. Но давайте сейчас поговорим про панели программы, так как это довольно важно при проектировании визуального отображения редактора.

Существует два вида панелей, а именно: панель инструментов (toolbar) и панель состояния (statusbar).

На первой панели размещаются функциональные кнопки, а так же другие средства для форматирования и редактирования текста.

Каждая из этих панелей может иметь своё положение (снизу или сверху), то есть у нас есть возможность довольно гибко менять их положения в редакторе. Для этого можно воспользоваться параметрами:

theme_advanced_toolbar_location: (top | bottom | none), theme_advanced_statusbar_location: top | bottom | none)

При этом в зависимости от значения параметра и будет установлено конечное положение панели, или если параметр стоит в значении ‘none’, то панель вообще не будет отображена.

И ещё, панель инструментов имеет такой параметр как выравнивание, в соответствии значения которого, и будет центрированы элементы панели. За центрирование элементов отвечает параметр theme_advanced_toolbar_location, и может принимать стандартные значения: center, left, right (по-умолчанию установлен параметр center).

Итак, с панелями разобрались, но ведь на них следует добавить что-то?

Ведь по-умолчанию он будут просто пустовать, с минимальным набором значений, на ведь не нужен такой редактор?

Для размещения, элементы, или же другими словами — кнопки, должны разбиваться на несколько категорий, в каждой из которых могут находиться элементы (не)разделённые знаком разделителя. Для абстракции групп в программе используется понятие кнопок, и для задания группы в качестве значения параметра theme_advanced_button(n+1), где n-текущий номер группы, задается набор элементов, которые к ней должны относится.

Хотя про набор вы можете, особо не беспокоится, так как по-умолчанию в панели инструментов вы и так сможете найти стандартный набор необходимых функций выравнивания, форматирования и прочего, но это доступно лишь в режиме темы ‘advanced’.

Для задания языка редактора нужно всего лишь добавить параметр ‘language’ со значением ‘ru’.

Что ж, давайте посмотрим, что вышло у меня:

Листинг 1.2.

TNT43 Visual Editor tinyMCE.init({ mode: "textareas", theme: "advanced", language: "ru", plugins: "table,save,advhr,advimage,advlink,insertdatetime, preview,zoom, searchreplace,print,contextmenu,paste,directionality ", theme_advanced_buttons1_add_before: "save,newdocument,separator", theme_advanced_buttons1_add: "fontselect,fontsizeselect", theme_advanced_buttons2_add: "separator,insertdate,inserttime,preview,zoom,separator, forecolor,backcolor", theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator", theme_advanced_buttons3_add: "advhr,separator,print,separator,ltr,rtl,separator ", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", plugi2n_insertdate_dateFormat: "%Y-%m-%d", plugi2n_insertdate_timeFormat: "%H:%M:%S", theme_advanced_resizing: true, theme_advanced_resize_horizontal: false, paste_auto_cleanup_on_paste: true, paste_convert_headers_to_strong: false, paste_strip_class_attributes: "all", paste_remove_spans: false, paste_remove_styles: false });

Вот — это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания.

Что ж, давайте рассмотрим его анатомию. Сначала мы передаём наиболее важные параметры, а именно: метод "замены" текстовых полей, тип темы редактора, язык редактора, а так же список подключаемых плагинов. Кстати о них. Насколько вы заметили, если внимательно читали, то в рамках данного текста мы их ещё не разу не упоминали.

Одно из самых популярных дополнений для MODX Revolution - визуальный редактор TinyMCE.

Оно и понятно, редко какой сайт может обойтись без хорошего richtext редактора для контента.

В этой статье рассматривается установка и настройка редактора TinyMCE.

Установка

Для установки необходимо скачать пакет из репозитория (http://modx.com/extras/package/TinyMCE) и установить его через раздел "Управление пакетами" вашего сайта.

После установки пакета вы сразу же можете открыть любой ресурс для редактирования и убедиться в том, что редактор появился.

Вы можете сразу же начать писать в нем текст, однако для более комфортного использования рекомендуем произвести настройку редактора.

Настройка TinyMCE будет включать несколько этапов:

• Подключение файла стилей
• Добавление кнопок для работы с таблицами

Подключаем файл со стилями к TinyMCE

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

Открываем "Настройки системы," и в фильтре выбираем "Визуальный редактор":

В этом разделе всего доступно 5 настроек:

• Путь к CSS файлу (editor_css_path) - указываете путь к вашему файлу со стилями текста. Обратите внимание,что использовать не полный css файл вашего сайта, а отдельный файл, в который вынести только стили, непосредственно относящиеся к оформлению текста (заголовки h1-h6, параграфы p, ссылки a, таблицы tables и другие). Редактор будет работать быстрее и корректнее.
• Использовать текстовый редактор (use_editor) - можно отключить редактор при необходимости на время, не удаляя при этом TinyMCE.
• Редактор (which_editor) - MODX Revolution позволяет установить несколько различных редакторов на сайт, при необходимости можно переключаться между ними. Кстати, можно переопределить эту настройку для администраторов сайта, назначив таким образом разным администраторам разный редактор.
• Редактор для элементов (which_element_editor) - укажите редактор для сниппетов, плагинов, чанков. Например это может быть CodeMirror или Ace.

Добавляем в TinyMCE кнопки для работы с таблицами

В TinyMCE, который устанавливается из репозитория MODX Revolution, по какой то причине по умолчанию отключена работа с таблицами. Нет, вы конечно можете переключится в режим HTML и написать код вручную, но зачем! Гораздо проще потратить 2 минуты и включить поддержку таблиц.

Итак, открываем настройки системы, и в первом фильтре выбираем tinymce :

Откроется список доступных параметров. Нас интересуют 2:

• tiny.custom_plugins - список подключенных плагинов к TinyMCS. В конец списка необходимо добавить "table" , подключив тем самым плагин для работы с таблицами. Плагин идет вместе с TinyMCE, и устанавливаеть его не надо, его надо просто включить.
• tiny.custom_buttons3 - список кнопок, отображаемых на 3-й строке. Укажите там "tablecontrols" , добавив тем самым набор кнопок для работы с таблицами. Понятное дело, что эти кнопки можно разместить на любой другой строке. Если вы посмотрите на другие строки, вы увидите список предустановленных кнопок, таких как undo,redo,selectall и много других. Можно "поиграть" ими, размещая кнопки в разном порядке.

Среди визуальных онлайн текстовых редакторов WYSIWYG (What You See Is What You Get) наиболее популярным является TinyMCE. Он имеет фактически все необходимое для работы с текстом и функционально подобен работе с Microsoft Word с дополнениями, необходимыми для специфической работе с вебом: переходом от визуального текстового представления к HTML-редактору , очисткой лишнего кода, вставкой текста из Word (позволяет избавиться от лишних символов форматирования), добавления смайликов и т.п. Единственное, что разработчиками дается платно - это менеджеры загрузок для изображений и файлов (два отдельных модуля-плагина).

Итак, сама установка, если вы используете нативный PHP без всяких «шаблонных примочек» типа Smarty, проблем с установкой быть не должно.

Сначала вы скачиваете последнюю версию TinyMCE (http://www.tinymce.com/download/). Тут можно выбрать одну из двух вариантов версий - обычная и с использованием jQuery . Распаковывайте архив в папку вашего сайта (в моем примере он будет в папке js, расположенной в корне сайта).

Параллельно с этим скачиваете архив с русификацией (http://tinymce.moxiecode.com/download_i18n.php). Распаковываем его в папку /js/tinymce/jscripts/tiny_mce. То есть, там, где есть каталоги lang, plugins и т.п.

Теперь в нужном php или html файле добавляем:

tinyMCE.init({ // режим mode: "textareas", theme: "advanced", // тема, есть простая -simple language:"ru", // язык plugins: // подключаем плагины, это подкаталоги в каталоге plugins "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // теперь перечисляем какие кнопки вывести на панель theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", theme_advanced_resizing: true, // скин skin: "o2k7", skin_variant: "silver", // Указываем CSS сайта content_css: "css/example.css", // в файле можно привести и другие параметры });

И в данном случае все элементы textarea поменяются на визуальные редакторы TinyMCE. Все достаточно просто. Конфигурацию кнопок и плагинов можно изменять по своему усмотрению. К тому же мы сейчас рассмотрели более сложный вариант, с темой «advanced». Есть и еще одна - «simple», в которой дается минимальный набор, и для подключения достаточно вписать просто:

tinyMCE.init({ mode:"textareas", theme:"simple", language:"ru" });

Также стоит указать на один важный момент. В описанном выше случае все поля textarea заменяются редакторами TinyMCE, но иногда этого не требуется - достаточно обычных текстовых полей. Как это реализовать? На самом деле очень просто. В настройках TinyMCE добавляем одну строку:

TinyMCE.init({ ... editor_deselector: "mceNoEditor" });

И теперь в textarea можно указать переключатель как класс…

TinyMCE не загружается

Вариант с менеджерами загрузки файлов и изображений можно решить и бесплатным образом. Для этого можно воспользоваться плагином Image Manager Андрея Антонова, который скачивается здесь (http://dustweb.ru/projects/tinymce_images/). Скачивается также в виде архива, который потом нужно распаковать в каталог plugins в папке tiny_mce. Таким образом, там появится новая директория images.

В ней мы заходим в …/tiny_mce/plugins/images/connector/php/, где открываем два файла: config.php и yoursessioncheck.php. В config.php указываем директории для сохранения изображений и файлов. Чтобы все работало успешно, установите права доступа на эти папки как CHMOD 777. В файле yoursessioncheck.php отключен комментариями блок кода проверки сессии. Если вам не требуется соблюдать безопасность ввода данных, то можно оставить все как есть, т.е. закомментированным, это может быть актуально в некоторых случаях для фронт-энда. Но, например, в моем случае, чаще всего визуальный редактор и вставка файлов и изображений реализуется в рамках админ-панели , то есть, бэк-энда, поэтому проверка делается. В общем, это на ваше усмотрение.

Для подключения Image Manager к TinyMCE нужно вставить слово «images» в список plugins нашего кода (для theme:advanced), а также в кнопки theme_advanced_buttons1.

Альтернативой Image Manager может послужить Tiny Browser, с версии 1.4.2 он стал платным ($6), так что вы можете попробовать поискать его более ранние версии, хотя Image Manager удовлетворяет всем необходимым потребностям.

Не знаю, стоит ли тут поднимать вопросы компрессии TinyMCE, но на страничке, откуда вы скачивали редактор, есть архив с компрессором. При подключении могут возникать некоторые проблемы, поэтому, если вы хотите использовать решение с сжатием , то информацию по этому поводу можно найти в интернете.

Что касается особенностей подключения TinyMCE на сайт, где вы используете Smarty, то наиболее часто задается вопрос по ошибке «Fatal error: Smarty: : syntax error: unrecognized tag…». Это, в принципе, даже не ошибка конкретно TinyMCE, а вообще, JS-кода, вставляемого в шаблоны. Дело в том, что в Smarty по умолчанию и в большинстве случаев (хотя это можно изменить) все теги шаблонов располагаются между специальными символьными разделителями - фигурными скобками. Как мы знаем, фигурные скобки используются и в JS. Поэтому при вставке JS-кода нужно несколько изменить конструкцию, а именно, открывающие и закрывающие фигурные скобки JS-кода заменить соответственно на {literal}{{/literal} и {literal}}{/literal}. Всё.

Я сам Smarty не использую, но нередко бывают ситуации, когда требуется расширить функционал уже разработанных сайтов, как в админ-панелях, так и на фронт-энде.