Знакомство с великим и могучим текстовым редактором на JS
Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB. К ключевым особенностям программы относятся: поддержка тем\шаблонов, языковая поддержка и возможность подключения плагинов. HTML редактор TinyMCE используется во многих системах управления и движках сайтов, в том числе и в системе управления BIT company CMS v 1.01. Мы можем отметить программу как отличный и широкофункциональный инструмент для редактирования HTML кода, вставки видео, текстово-графической информации, таблиц и графиков. Правда так же отметим и скудность русскоязычной информации о методах и свойствах JS редактора TinyMCE( но вам повезло! Здесь вы найдете ответы на базовые вопросы и научитесь работать с редактором TinyMCE).
Как видно из титульного изображения выше, JS редактор очень похож на текстовый редактор в офисных приложения — принцип работы у редактора TinyMCE аналогичный. Для пользователей не знакомых с возможностями html и css есть графический интерфейс редактора. Для пользователей которые владеют языком программирования html и css есть так же расширенный редактор HTML. Данный редактор позволяет решить практически любые задачи, связанные с оформление страниц.
Инструкция полностью применима для редактора версии 3.5.11. Для более поздних версий методология работы с редактором так же должна быть аналогичной.
Установка и настройка TinyMCE
1. Скачиваем свежую версию редактора здесь и распаковываем.
2. Копируем содержимое архива в нужную вам директорию сайта.
3. Подключаем редактор к нашему сайту путем вставки кода на нужную страницу:
<script type="text/javascript" src="/path/to/tiny_mce.js"></script>4. Инициализируем редактор при помощи JavaScript кода:
<!-- TinyMCE -->
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
<!-- /TinyMCE -->
<textarea></textarea>5. Готово! Теперь вы вставили и инициализировали простейший TinyMCE редактор.
Как вы заметили подключение и инициализация JS редактора проходит в 3 логических шага:
- подключение библиотеки к странице сайта
- инициализация объекта
- вставка тега textarea, который и становится графическим html редактором.
Инициализация редактора и его параметры
Редактор TinyMCE возможно инициализировать с различными параметрами, темами, плагинами. В данном разделе мы рассмотрим некоторые параметры и их значения. Вот пример инициализации редактора в системе управления BIT company CMS V 1.01:
<!-- TinyMCE -->
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "exact",
elements: "content_editor",
theme : "advanced",
language:"ru",
plugins : "autolink,lists,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,precode,uploads_image",
// Theme options
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,preCode,anchor,image,uploads_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 options
skin : "o2k7",
skin_variant : "silver",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "js/template_list.js",
external_link_list_url : "js/link_list.js",
external_image_list_url : "js/image_list.js",
media_external_list_url : "js/media_list.js",
// Replace values for the template plugin
template_replace_values : { username : "Some User", staffid : "991234" }
});
</script>
<!-- /TinyMCE -->mode [textareas|exact|specific_textareas|none] — определяет какие html экхемляры будут преобразованы в графические редакторы TinyMCE.
- textareas — преобразовывает все теги <textarea> к виду редактора
- specific_textareas — преобразуются только элементы имеющие, указанный в параметре editor_selector селектор или не имеющие селектор, указанный в editor_deselector
<script type="text/javascript">
tinyMCE.init ({
mode : "specific_textareas",
editor_selector : "editme",
language:"ru",
theme : "simple"
});
</script>
<textarea id="content" class="editme" name="content"></textarea>- exact — преобразуются только элементы, идентификаторы которых перечислены в параметре elements(пример из BIT company CMS).
- none — элементы не преобразуются
theme [simple|advanced] — определяет режим инициализации редактора.
- simple — режим, включающий базовые функции и запрещающий гибкую настройку
- advanced — режим, позволяющий гибкую настройку плагинов, кнопок редактора, темы редактора и т.д.
language — указывает код языкового пакета графического редактора TinyMCE.
plugins — список плагинов, инициализируемых вместе с редактором, разделенные запятыми.
theme_advanced_buttons<1-n> — содержит список элементов управления для вставки в панели инструментов, где <1-n> строка в панели инструментов.
theme_advanced_toolbar_location — указывает, где должны располагаться панели инструментов: top — сверху, bottom — снизу.
theme_advanced_toolbar_align — позволяет задать выравнивание панели инструментов: по левому краю, по правому и по центру.
theme_advanced_statusbar_location — задает положение статусбара (top — вверху, bottom — внизу), либо указывает на его отсуствие — none.
theme_advanced_resizing — включает — true или выключает — false возможность изменять размеры окна редактора. Не работает, если значение theme_advanced_statusbar_location установлено в none.
skin — указывает какой скин данной темы необходимо использовать.
skin_variant — указывает какой вариант скина необходимо использовать.
content_css — подключает пользовательский css-файл(либо набор файлов, перечисленных через запятую), который будет использоваться в редакторе.
relative_urls — устанавливает, будут ли ссылки в редакторе относительные (true) или абсолютные (false).
template_replace_values — преобразование элемента страницы в графический редактор html кода с параметрами.
template_replace_values : { username : "Some User", staffid : "991234" }Вот мы и подытожим с вопросом подключения и инициализации графического редактора html кода TinyMCE для сайта. Всем спасибо!
