Ноя 27

Встраиваем редактор TinyMCE в TEXTAREA

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

Апр 07

Файловый менеджер для TinyMCE и CKEditor

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

Что выбрать в качестве редактора текстов особых вопросов нет, сразу на помощь приходят TinyMCE или CKEditor - оба можно использовать бесплатно в соответствии с LGPL лицензией. Но вот для того, чтобы пользователь мог загружать картинки на сайт - универсального решения нет. Конечно к каждому редактору предлагаются решения от производителей (к TinyMCE - MCImageManager и MCFileManager, к CKEditor - CKFinder), но все они платные.

Из бесплатных альтернатив неплохой является Ajex File Manager.

Ajex File Manager

Плюсы:

  • Бесплатный;
  • Умеет уменьшать разрешение картинок в процессе загрузки;
  • Показывает уменьшенные версии картинок при просмотре;
  • Поддерживает групповое удаление файлов.
  • Встраивается как в TinyMCE, так и в CKEditor (на сайте автора есть примеры).
  • Автоматически преобразует русские имена файлов в кириллицу.

Минусы:

  • Интерфейс пользователя с первого взгляда не понятен.  Становится очевидным не сразу, а после некоторой работы с ним и изучения подписей к кнопкам.
  • Параметр $cfg['url'] в настройках задает базовую директорую, в которую, как мне показалось, загрузить посредством редактора ничего нельзя (в редакторе, кстати, она всегда стоит на самом верхнем уровне и называется upload, что тоже не очевидно). Проблема решается размещением в этой директории других директорий, например, image, file и т.п. В которые уже можно заходить и сохранять файлы.