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