Декабрь 19, 2019 Просмотры 19 просмотров

Визуальный on-line редактор TinyMCE

Всякий WYSIWYG - зло. Мне, как вебпрограммисту, желательно, чтобы все администраторы сайтов владели HTML. А заодно - CSS, JavaScript, PHP, SQL, XML, XSLT, DTD... и не доставали бы программистов. 

К сожалению, - это невозможно. Юзер привык работать комфортно, привык к Word-у, Excel-ю и ждет от веба тех же Word-ов и Excel-ей. Можно по разному относиться к этим желаниям. Можно отвесить губу и погрузиться в нирвану. А можно предоставить юзеру желаемое. Именно второго требует от нас наша профессия. Перейдем к делу.

Чего от нас хотят? Примерная ситуация: администратор опубликовал на сайте статью, заметил в ней опечатку и решил исправить. Для этого он заходит в админчасть и выбирает статью для редактирования. Написанный вами скрипт выдает ему эту статью. В каком виде? В виде HTML-кода в поле "textarea"? Админ будет недоволен. Он желает работать по принципу "что видишь - то и получаешь" (как в Word-е). От нас требуется выдать ему статью в том виде, в каком она отображена на сайте. И, "всего лишь", прибавить к этому возможность изменить эту статью. Это и есть WYSIWYG.

Можно самому писать WYSIWYG-редактор. Спустя годы вашей упорной работы он по своим возможностям догонит лучшие современные образцы. Тем временем благополучно скончается проект, над которым вы сейчас работаете, и который должен был быть завершен еще вчера. Предлагаю другое решение - найти и прикрутить к вашему движку самый лучший современный визивиг. Лично я так и поступил. Правда понятие "самый лучший" - очень субъективно. У меня - одно, у вас - другое...

Выбирал в следующей четверке: FCKeditor 2.2, MouseDHTML, SiteWerk, TinyMCE 2.02. У каждого есть свои плюсы и минусы. FCKeditor и TinyMCE - очень продвинуты, но очень тяжелы. - Натуральные слоны. SiteWerk и, особенно, MouseDHTML - легки, но, соответственно, менее функциональны. С первым недостатком большинство пользователей почему-то мирятся легче, чем со вторым. Поэтому от последних двух редакторов пришлось отказаться. FCKeditor и TinyMCE - примерно равные соперники. В каждом из них есть фичи, которых нет у другого. Но выбрал TinyMCE, так как он проще инсталируется и не требует изменений в коде написанных мною форм.

Существует куча других аналогичных редакторов. Их сравнение могло бы стать темой очень полезного исследования. Но я выбрал TinyMCE и буду писать именно о нем. На полноту описания не претендую. Кому нужно, - найдет его в документации TinyMCE. Эта документация включена в дистрибутив редактора. Также не претендую на истину в последней инстанции. Если где-то неправ, - буду очень рад поправкам: "Век живи - век учись".

Данная статья пишется только для того, чтобы

  • Дать читателю начальное представление о редакторе.
  • Поделиться личными впечатлениями и соображениями.
  • Протестировать редактор 

1. Где взять? - Совершенно бесплатно скачать на http://tinymce.moxiecode.com/.

2. Как с копирайтом? - Нормально. Редактор поставляется по лицензии LGPL. Она разрешает вам пользоваться редактором, менять его исходные коды, продавать... Мне этого вполне достаточно. Авторские же лавры должны остаться авторам. Они их заслужили.

Благодаря своей функциональности и свободной лицензии TinyMCE входит в дистрибутивы и плагины многих CMS, как платных, так и бесплатных. Поэтому смело можете прикручивать его к своему движку.

3. Как инсталировать? - Элементарно. Во первых, нужно залить дистрибутив на ваш сервер.

В разархивированном виде он весит под три метра. Но весь целиком он вам не нужен. Все, что вам нужно, включая плагины и хелпы, лежит в папке tinymce/jscripts/tiny_mce. Только ее и заливайте. И то не всю. Можно убрать оттуда то, что вам явно не понадобится. Например, в папке tinymce/jscripts/tiny_mce/langs лежат 36 (!!!) языковых пакетов. Вам столько надо? Если заказчики - не исландцы, то зачем вам поддержка исландского языка? Если ваш сайт - в кодировке windows-1251, то зачем вам надписи в кодировке KOI8-R? Ну да сами смотрите, что вам нужно. Аналогично - с плагинами и хелпами. Что ненужно, - можно просто удалить.

Во-вторых, в код страницы, на которой админ редактирует статью нужно вставить следующие строчки:

<script language="javascript" type="text/javascript" src="ваш_путь/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>

Теперь админ не увидит в "textarea" HTML-ный код, а увидит редактируемую статью и будет очень рад. Он также получит минимальный набор кнопочек для редактирования. Чтобы ваша текстариа превратилась в подобие Word-а, нужно вместо приведенных строк вставить следующие:

<script language="javascript" type="text/javascript" src="ваш_путь/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu",
theme_advanced_buttons1_add_before : "save,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,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],
hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_data/example_link_list.js",
external_image_list_url : "example_data/example_image_list.js",
flash_external_list_url : "example_data/example_flash_list.js"
});
</script>

Теперь ваш админ будет совсем-совсем рад. Можете настраивать этот "Ворд" сколько угодно. Путь к текущему элементу по дереву документа ничего не говорит пользователю. Только глаза мозолит. Поэтому удалите строчку

theme_advanced_path_location : "bottom",

Чтобы русифицировать интерфейс, вставьте строчку

language : "ru",

И будет вам благо. Только вот русский хелп отсутствует. Вместо него выдается 404-я ошибка. Чтобы ее избежать скопируйте/переименуйте английский хелп (папка en) в русский хелп (папка ru). Если есть время, умение и желание, - можете перевести его на русский язык или поискать готовый перевод на просторах мировой паутины.

Хватит о настройках. Более подробно вы можете прочитать в доках редактора.

4. Возможности редактора. - Большие. Можете судить об этом по картинкам. Очень понравилась возможность добавлять смайлы. Еще есть проверка орфографии, которая требует специального плагина к IE, который платный 

Кроме того, следует учитывать расширяемость функционала редактора. Его можно пополнять плагинами. Эти плагины можно искать и качать, можно покупать, можно писать самому.

5. Кроссброузерность. - Солидная: MSIE 6, MSIE 5.5 SP2, MSIE 5.0 (под XP), Mozilla 1.7.x, Firefox 1.0.x, Firefox 1.5b2, Safari 2.0 (412), Opera 9 Preview 1.

Под 7-й Оперой пробовал работать - не получилось. Но что понравилось, так это то, что ничего не портится. Редактор просто игнорируется броузером, и в "textarea" отображается милый моему сердцу ХТМЛ. Все нормально редактирется и сохраняется. А от админа можно требовать, чтобы он пользовался современным броузером. Хоть IE, хоть Firefox-ом.

6. HTML-код. - Некрасивый. Как и у любого визивига.

Редактор умеет вырезать лишние теги. Обязательно делает это при сабмите. К сожалению иногда заменяет пробелы на "&nbsp;" хотя это абсолютно не нужно.

Умеет проверять валидность кода в соответствии со спецификацией XHTML 1.0. Причем эта проверка - настраиваемая. Читайте документацию. Впрочем, в ходе тестирования я умудрился заставить редактор выдать невалидный код (может быть плохо настраивал?). Все таки - это не валидатор W3C. Впрочем, код, написанный ручками пользователя, как правило еще более невалиден. 

Кроме того редактор вырезает все "лишние" пробельные символы. Это можно считать фичей, так как документ теряет в весе. А можно считать багом, так как все форматирование пробелами накрывается медным тазом, и потом в случае нужды в этом коде черт ногу сломит.

А вообще мне этот редактор понравился. Стал испытывать еще большее уважение к явистам. Особенно - к создателям TinyMCE из Moxiecode Systems AB. Эта статья целиком написана и отредактирована с помощью редактора TinyMCE. Спасибо вам, явисты, от пхписта!


Просмотры 19 просмотров

Статистика просмотров страницы:

  • за текущий месяц (Апрель 2021) - 1;
  • за прошлый месяц (Март 2021) - 7;
  • за последние 3 месяца (Январь 2021 - Март 2021) - 17;
  • за последний год (Апрель 2020 - Март 2021) - 18;

Отзывы

Админ
Отлично!
Март 28 Админ

Статьи и обзоры Все статьи

Современный бизнес вынужден работать в непростых условиях регулярных перегрузок и ...
Разработка веб сайтов – одна из самых востребованных услуг в ...
В прошлом году многие впервые попробовали работать удалённо — такой ...
Уже более 70 десятилетий телевизор является наиболее популярным бытовым прибором ...