Мы уже рассматривали в блоге, как можно несколько улучшить применения элемента 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().
