Тестовый дизайн новой версии сайта IGD.BY         RU   |   EN
Установка и настройка TinyMCE. Правильная стыковка со Smarty
Автор: Кристофер


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

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

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

1. Скачиваем TinyMCE. Внимание! В данной статье описывается установка всего арсенала для TinyMCE версий 3.х. Тут можно выбрать одну из двух вариантов версий — обычная и с использованием jQuery. Распаковывайте архив в папку вашего сайта (в моем примере он будет в папке js, расположенной в корне сайта).

2. Скачиваем архив с русификацией. Распаковываем его в папку /js/tinymce/jscripts/tiny_mce. То есть, там, где есть каталоги lang, plugins и т.п. 

3. Теперь в нужном php или html файле, в котором мы хотим вставить визуальный редактор для полей ввода текста, добавляем следующий код: 

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

<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js">script>

<script type="text/javascript">

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",

//  в файле можно привести и другие параметры

 

});

script>

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

Есть и еще одна — «simple», в которой дается минимальный набор, и для подключения достаточно вписать просто:

 

<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js">script>

 <script type="text/javascript">

    tinyMCE.init({

        mode:"textareas",

        theme:"simple",

        language:"ru"

    });

script>

 


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

 

tinyMCE.init({

        ...

        editor_deselector : "mceNoEditor"

});

 


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

 

<textarea name="short_description" class="mceNoEditor">

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

textarea>

 

 

 

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

1. Скачиваем плагин Image Manager Андрея Антонова и распаковываем его в папку tiny_mce/plugins. Таким образом, там появится новая директория images.

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

3. Для подключения Image Manager к TinyMCE в скрипт для темы advanced (который мы показали самым первым) нужно вставить слово «images» в список plugins, а также вписать «images» в кнопки theme_advanced_buttons1. 

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

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

Также рекомендуем посмотреть (если вы с ним еще не сталкивались) еще один WYSIWYG-редактор CKEditor