Наверно мой уважаемый читатель не раз сталкивался с ситуацией, когда конечный веб-проект ориентировался не на узкий круг веб-программистов или людей "введенных" в систему, а исключительно начинающих людей, для которых наиболее важным аспектом является, безусловно, простота и практичность, а самое основное это конечно ассоциативность и красота.
Недавно мне пришлось разрабатывать проект для организации писателей Украины, в которой, безусловно, программистов "очень много", и нужно было искать решение для упрощения интерфейса системы, особенно это касалось написания статей, и прочего редактируемого вручную содержания сайта.
Я испробовал приличное множество систем визуального редактирования, и безусловно о каждой из них у меня сложилось определённое впечатление: как хорошее, так и плохое.
В рамках данного проекта я испробовал три системы визуального редактирования, которые, безусловно, достойны внимания, и будут рассмотрены в данной статье. Это следующие программы: TinyMCE, WYM Editor, HTMLArea.
Ну конечно в один ряд эти программы ставить нельзя, хотя бы по их функционалу и назначению. Это было бы равносильно сравнивать возможности встроенного редактора Notepad и коммерческого Microsoft Word. Ведь каждая эта программа особенная, и относится к определённому классу. Посему сегодня мы поговорим именно о ней.
Сказание о TinyMCE
Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, "портативностью", ассоциативностью, и при всё при этом - относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW - W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.
Что ж, чтобы не быть голословным, и не занимать большую часть статьи рекламой и похвалами, я покажу вам систему в режиме реального времени.
Чтобы загрузить себе версию системы, вам необходимо зайти на сайт http://tinymce.org и скачать себя последнюю версию, после чего читать дальше моё повествование.
Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?
Да очень просто, для этого вам сначала необходимо подключить основной класс TinyMCE, после чего в документе автоматически станет доступным прототип объекта TinyMCE, который и является основным API-интерфейсом системы, через который происходит общение с программой, и её настройка.
Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:
Листинг 1.1
<html>
<head>
<title>Первый пример</title>
<meta http-equiv='Content-Type'
Content='text/html;charset=utf-8'/>
<script type='text/javascript'
src='tinymce/jscripts/tiny_mce/tiny_mce.js'></script>
<script type='text/javascript'>
<!--
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
-->
</script>
</head>
<body>
<h3>Некоторый элемент TextArea</h3>
<textarea id='ds1' cols='65' rows='13'></textarea>
</body>
</html>
В данном простейшем случае в качестве поля для редактирования мы увидим редактор с минимальным набором функций для стандартного форматирования текста, но не больше. Подобный подход можно применить в рамках проекта по созданию чата, форума, гостевой книги и прочего. Для более же сложных вариантов у нас есть дополнительный набор функций и методов, о которых мы сейчас и поговорим.
Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса - init().
Мы передаём в качестве параметра некоторый хеш, в котором значение элемента mode соответствует 'textareas', а элемента theme - 'simple'. Элемент `mode` означает метод "замены" стандартных текстовых полей (textarea), на WYSIWYG. Он может принимать значения 'textareas' , 'exact' и 'specify_textareas'.
В случае 'textareas' мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.
В свою очередь элемент 'theme' означает ничто иное, как текущий тип оформления редактора и может принимать значения: 'simple' и 'advanced'.
В нашем случае, когда мы используем тип 'simple', мы подключаем исключительно стандартные функции редактора, и при этом не может особо менять его функционал, как я уже говорил - это вполне сгодится для малых проектов, а так же для тех, в которых необходима высокая скорость соединения.
Теперь давайте рассмотрим работу с редактором во время включённого режима темы 'advanced'.
В этом случае мы имеем гибкий в редактировании интерфейс, полное редактирование всех используемых редактором функций, а так же ещё несколько моментов.
Что ж, допустим, вы начали проект некоторого электронного журнала или Интернет-издания, в котором принципиальной является возможность создание статей со стороны администрации. При этом следует учитывать, что интерфейс программы должен быть как можно более схожим с привычным для нас интерфейсом наиболее используемого Word'а, а так же иметь достаточное количество функций для воплощения всех идей редактора относительно форматирования текста статьи, и никогда не должно возникать таких вопросов как: "А куда нужно нажать?", "А почему оно не показывает:.", "А куда делся весь текст":
Визуальный редактор TinyMCE
Для более редкого возникновения подобных вопросов (но ведь от них никуда не деться :) мы сейчас немного изменим, текущий вариант редактора и добавим следующие функции:
1. Автоматическое форматирование вставляемого текста
2. Добавим функции форматирования
3. Изменим расположение панелей управления
4. Зададим язык редактора
5. Добавим проверку орфографии
Что ж, давайте обсудим точнее, что мы хотим увидеть в редакторе:
1. Панель форматирования находится сверху
2. Панель состояния отсутствует
3. Язык редактора - русский
4. Функции форматирования: полужирный, курсив, подчёркивание, шрифт, размер, стиль текста, цвет, заливка.
5. Функции структурного форматирования: таблица, выравнивание, табуляция, список
6. Дополнительные функции: вставка изображения, вставка, предпросмотр, вставка гиперссылки, функции "отката" и "возврата", ну и, наверное, введём печать.
Что ж, формализация задания есть, теперь давайте решим, как мы будем это воплощать в жизнь.
Для воплощения функции авторформата вставляемого извне текста необходимо указать параметр хеш-списка - 'paste_auto_cleanup_on_paste', который принимает в качестве значения булев (true || false), и в зависимости от этого форматирует или нет внешний текст, переданный из буфера обмена.
При использовании данного параметра следует так же использовать и следующие параметры:
paste_convert_headers_to_strong : (true | false),
paste_strip_class_attributes : "all",
paste_remove_spans : (true | false),
paste_remove_styles : (true | false)
Ну, я их не озвучиваю, так как их названия и так ассоциативны. Что ж, со вставкой мы проблему решили, и теперь нам необходимо решить ещё несколько задач, поставленных нами ранее. Но давайте сейчас поговорим про панели программы, так как это довольно важно при проектировании визуального отображения редактора.
Существует два вида панелей, а именно: панель инструментов (toolbar) и панель состояния (statusbar).
На первой панели размещаются функциональные кнопки, а так же другие средства для форматирования и редактирования текста.
Каждая из этих панелей может иметь своё положение (снизу или сверху), то есть у нас есть возможность довольно гибко менять их положения в редакторе. Для этого можно воспользоваться параметрами:
theme_advanced_toolbar_location : (top | bottom | none),
theme_advanced_statusbar_location : top | bottom | none)
При этом в зависимости от значения параметра и будет установлено конечное положение панели, или если параметр стоит в значении 'none', то панель вообще не будет отображена.
И ещё, панель инструментов имеет такой параметр как выравнивание, в соответствии значения которого, и будет центрированы элементы панели. За центрирование элементов отвечает параметр theme_advanced_toolbar_location, и может принимать стандартные значения: center, left, right (по-умолчанию установлен параметр center).
Итак, с панелями разобрались, но ведь на них следует добавить что-то?
Ведь по-умолчанию он будут просто пустовать, с минимальным набором значений, на ведь не нужен такой редактор?
Для размещения, элементы, или же другими словами - кнопки, должны разбиваться на несколько категорий, в каждой из которых могут находиться элементы (не)разделённые знаком разделителя. Для абстракции групп в программе используется понятие кнопок, и для задания группы в качестве значения параметра theme_advanced_button(n+1), где n-текущий номер группы, задается набор элементов, которые к ней должны относится.
Хотя про набор вы можете, особо не беспокоится, так как по-умолчанию в панели инструментов вы и так сможете найти стандартный набор необходимых функций выравнивания, форматирования и прочего, но это доступно лишь в режиме темы 'advanced'.
Для задания языка редактора нужно всего лишь добавить параметр 'language' со значением 'ru'.
Что ж, давайте посмотрим, что вышло у меня:
Листинг 1.2.
<html>
<head>
<title>TNT43 Visual Editor</title>
<script type='text/javascript' src='tinymce/jscripts/tiny_mce/tiny_mce.js'></script>
<script type='text/javascript'>
tinyMCE.init({
mode : "textareas",
theme : "advanced",
language: "ru",
plugins : "table,save,advhr,advimage,advlink,insertdatetime,
preview,zoom, searchreplace,print,contextmenu,paste,directionality ",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,
forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator",
theme_advanced_buttons3_add : "advhr,separator,print,separator,ltr,rtl,separator ",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugi2n_insertdate_dateFormat : "%Y-%m-%d",
plugi2n_insertdate_timeFormat : "%H:%M:%S",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});
</script>
</head>
<body>
<textarea id='data' rows='15' cols='60'></textarea>
</body>
</html>
Вот - это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания.
Что ж, давайте рассмотрим его анатомию. Сначала мы передаём наиболее важные параметры, а именно: метод "замены" текстовых полей, тип темы редактора, язык редактора, а так же список подключаемых плагинов. Кстати о них. Насколько вы заметили, если внимательно читали, то в рамках данного текста мы их ещё не разу не упоминали.
Плагины - некоторые внешние модули, которые необходимы для воплощения тех либо иных функций программы. Плагины размещаются в папке `plugins`, откуда подключатся к программе в момент вызова. Для использования плагинов в программе, их сначала необходимо перечислить через запятую, в качестве параметров элемента `plugins`, после чего добавить соответствующую кнопку на панель, для их использования.
Так же в рамках примера в листинге 1.2, мы использовали плагин inserdate, для котрого позже задали параметр dateFormat и timeFormat, которые вводят формат используемого времени и даты, соответственно. Они задаются в соответствии со спецификацией функции временных меток.
Так же стоит упомянуть другие интересные функции, использованные в примере:
* paste_remove - при режиме true, редактор фильтрует все поступившие из буфера обмела данные, и удаляет контеинеры spaи.
* paste_convert_headers_to_strong - при режиме true, редактор изменяет все заголовки (h1,h2,h3,h4,h5,h6) в буффере обмена на элементы <strong>
* paste_auto_cleanup_on_paste - фильтр для данных из буфера обмена (применимо к данным из MS Word)
Вот, по-моему, для общего обзора системы хватит. Однако мы ещё не рассмотрели довольно большое количество методов API-интерфейса, без которых часто очень сложно представить себе работу с редактором. Но обещаю, что мы рассмотрим их в следующих выпусках МК.
Information
- Posted on 27.04.2013 17:32
- Просмотры: 2493