Мы уже рассматривали в блоге, как можно несколько улучшить применения элемента TEXTAREA (Шаманим с TEXTAREA), и рассматривали плюсы и минусы готового решение для работы с файлами и изображениями на сайта - Ajex File Manager.
Теперь же рассмотрим вопрос о том, как превратить TEXTAREA в полноценный визуальный текстовый редактор, чтобы можно было устанавливать размеры шрифтов, цвет, вставлять изображения и таблицы.
Одним из таких решений является TinyMCE, позволяющее использовать свой редактор по лицензии LGPL.
Как установить редактор на свою страницу?
Для начала надо скачать сам редактор и файлы с поддержкой русского интерфейса по адресам:
http://www.tinymce.com/ (сам редактор TinyMCE)
http://www.tinymce.com/i18n/index.php?ctrl=lang&act=download&pr_id=1 (файлы для поддержки различных языков, в т.ч. русского).
После этого, размещаем файлы TinyMCE в папке scripts и создаем документ, содержащий одно или несколько полей TEXTAREA, к которым мы хотим применить редактор.
<html> <script type="text/javascript" src="/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <textarea id='txt1'></textarea><br/><br/> <textarea id='txt2'></textarea> <script> tinyMCE.init({ // General options mode : "exact", elements : "txt1, txt2", theme : "advanced", language : "ru", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,media,help,code,|,insertdate,inserttime,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "none", theme_advanced_resizing : true, theme_advanced_path : false, // Example content CSS (should be your site CSS) content_css : "/styles/mystyle.css", }); </script> </html>
В вызове функции tinyMCE.init() находится множество параметров и настроек редактора TinyMCE, подробнее о которых можно прочесть на официальном сайте. Мы же рассмотрим только некоторые из них:
- elements : "txt1, txt2" - устанавливаем id элементов, к которым следует применять редактор TinyMCE.
- language : "ru" - язык, устанавливаемый в редакторе TinyMCE.
- content_css : "/styles/mystyle.css" - устанавливает файл с CSS стилями, для отображения внутри редактора.
Если вы обрабатываете содержимое TEXTAREA в PHP и при отправке формы помещаете тексты из TEXTAREA в базу данных, полезно будет использовать PHP функции htmlspecialchars() и htmlspecialchars_decode().