Каждый ВЕБ-программист когда-нибудь приходит к тому, что в своей работе ему необходимо применять JavaScript WYSIWYG-редакторы. Не стал исключением и Ваш покорный слуга, т.е. я. Но для начала краткая справка о том, что же это такое WYSIWYG-редакторы?
Аббревиатура WYSIWYG происходит от английской фразы «What You See Is What You Get» — что видим, то и получаем. Иными словами это утилиты, позволяющие работать не с исходным кодом некоего результирующего продукта (документа), а с его визуальным представлением. Самым распространенным примером такой утилиты есть всем известный текстовый редактор Word от компании Microsoft. С его помощью мы видим текст, с которым работаем именно таким, каким он будет на распечатке. А попробуйте открыть этот же файл Блокнотом… Бр-р-р. Белиберда!
Наряду со всеми, хорошими и разными представителями семейства WYSIWYG, существуют и те, которые облегчают жизнь контент-менеджерам сайтов, коие ничего не понимают в HTML-тегах, но коим жизненно необходимо раскрасить свой текст всеми цветами радуги (исключительно для удобочитаемости), насовать везде табличек и картинок (чтобы было понятнее), заголовки статей сделать гигантскими буквами (чтобы именно их статейка сразу бросалась в глаза как самая полезная и интересная) и пр. несомненно полезные вещи. От которых, однако, у дизайнеров с художниками останавливается сердце а с губ срываются разного рода эпитеты, вплоть до бранных и откровенно нецензурных. Почему? Ну это будет темой одной из следующих статей. А пока вернемся к полезным программам семейства JavaScript WYSIWYG-редакторов. Потому что именно эти программы, а точнее наборы JS-скриптов и позволяют это сделать любому пользователю.
Когда я впервые столкнулся с необходимостью использования WYSIWYG-редактора, я первым делом вспомнил приснопамятный «движок» Joomla и используемый в нем редактор TinyMCE. Широкий набор инструментов, гибкие настройки, легкость внедрения в код страниц. В общем, «всё при ней»! Точнее при нём. Да что там говорить — посмотрите сами:
Посмотреть примеры, пощупать в живую этот редактор можно на официальном сайте: http://www.tinymce.com/
Альтернативой этому редактору может служить FCKeditor. Перечень инструментов впечатляет не меньше. А внешний вид… Судите сами:
По сути — все то же самое. Но у этого редактора были некоторые неприятности с некоторым броузерами (не будем называть каким именно, думаю все и так догадались). Потому я долгое время использовал в своей работе TinyMCE. Кстати, как это добро интегрировать в код? Проще пареной репы!!! Скачав исходники, размещаем его в директории своего сайта, в исходном коде, в блоке <HEAD></HEAD> указываем подключение скрипта, например:
<script type=»text/javascript» src=»http://<?=$_SERVER[‘HTTP_HOST’]?>/js/tiny_mce/tiny_mce.js»></script>
Ну и для указания, что конкретно этот вот элемент ВЕБ-формы типа textarea нужно отдать на откуп нашему WYSIWYG-редактору, мы прописываем ему соответствующий атрибут CLASS, например так:
<textarea id="description" name="description" class="adm_textarea" />
И всё, редактор прикручен. Правда при этом он «прикрутится» в дефолтном состоянии, т.е. все настройки «по умолчанию». Потому, если Вам необходимо сменить тему, убрать отображение ненужных инструментов или целых их групп — это можно сделать, но сделать это немного сложнее. Правда руководствуясь примерами, идущими в комплекте с исходниками мне это было не так уж трудно.
И всё бы ничего, если бы однажды мои э-э-э-м… скажем так — подопечные, не пришли ко мне и не показали, что текст, оформленный ими, выглядит по-разному в Mozilla (и Google Chrom) и в Internet Explorer (и в Opera). А именно размер шрифта. Оказалось, что оба редактора, при указании пользователем размера шрифта, оперируют относительными значениями (small, medium, large и их продолжениями). Но размер шрифта по умолчанию, т.е. medium, не то что у каждого броузера — у каждого пользователя может отличаться.
Встал вопрос исконный «что делать?». Ну и попутно «кто виноват?». Дабы не стать жертвой я быстро отыскал решение проблемы — новую версию второго редактора, нынче именуемую CKeditor. Инструментарий не шибко беднее, зато размер шрифта задается в абсолютных значениях (в пунктах). Это было то, что нужно. Посмотрите сами:
В целом имеем все то же самое, но размер шрифта… Мне его очень не хватало. Теперь хватает 🙂
Ну а попробовать редактор в живую можно на странице «Демо» официального сайта этого редактора: http://ckeditor.com/
Если же кому чего не будет хватать или что-то не устраивает в тех редакторах, о которых я рассказал, всегда можно погуглить на эту тему и подобрать что-нить более подходящее. Ну а для особо ленивых могу предложить пару готовых линков на обзоры нескольких таких редакторов: например вот этот или вот этот.
Похожие записи
Нет комментариев
Оставить комментарий или два