Визуальный редактор openWYSIWYG

Автор: Роман Чернышов    Опубликовано: 19 мая 2011

Хочу поделиться опытом работы с текстовым редактором написанным на JavaScript и DHTML с простым названием openWYSIWYG. В последнее время я все чаще стал использовать в своих проектах именно его. Безусловно существует еще масса других не менее интересных и достойных редакторов которые я использую, но я расскажу вам именно об этом.

Как вы уже наверное догадались приставка «Open» говорит о том, что редактор пишется и распространяется с открытым исходным кодом, при этом он совершенно бесплатен и обладает достаточно богатым функционалом. Прекрасно работает со всеми современными браузерами (кроме Chrome), а также поддерживается IE6. Редактор openWYSIWYG в последнее время стремительно набирает популярность, и уже обзавелся множеством почитателей, что в свою очередь отражается на поддержке редактора свободным сообществом. В можно встретить интернете предостаточно статей и прочих материалов по использованию openWYSIWYG.

Сам же редактор состоит из четырех скриптов написанных на JavaScript и одного скрипта для загрузки файлов изображений на сервер, написанного на PHP (кстати на офф. сайте поддержки пишут что редактор совершенно не использует PHP, немного все же использует). Если сравнивать его с другими популярными редактором то становится ясно, что он очень компактен. Например TinyMCE состоит из ~250 файлов, что порой не очень то удобно.

Основным достоинством можно считать простоту установи редактора, и прикрутке его к любой CMS. Кстати моя собственная система управления контентом rcheCMS в последних версиях включает в себя именно этот редактор (Возможно в будущем будет другой, но пока этот вполне устраивает большинство пользователей).

Для установки редактора достаточно в любом месте HTML страница подключить скрипты редактора и инициализировать сам редактор:

<script type="text/javascript" src="s/scripts/wysiwyg.js"></script>
<script type="text/javascript" src="js/scripts/wysiwyg-settings.js"></script>
<script type="text/javascript">
var mysettings = new WYSIWYG.Settings();
// путь к папке с PHP скриптом загрузки изображений
mysettings.ImagePopupFile = "addons/imagelibrary/insert_image.php";
// ширина окна редактора
mysettings.ImagePopupWidth = 600;
// высота окна редактора
mysettings.ImagePopupHeight = 300;
WYSIWYG.attach('textarea1', full); //
</script>

Последняя строка отвечает за инициализацию и применение соответствующих настроек к редактору. Можно по желанию регулировать (добавлять, удалять) кнопки на панели.

Строка WYSIWYG.attach(‘textarea1’, full) содержит значение full, это говорит о выводе редактора со всеми возможными кнопками на панели (рис.1), при этом возможно значение small — выводит мини-редактор (рис.2). Кроме всего вы можете вписать в это поле собственное значение, предварительно настроив его отображение в файле wysiwyg-settings.js.

(рис. 1)

(рис. 2)

(рис. 3)

Сам же код страницы HTML будет при этом выглядеть достаточно просто:

<textarea name="textarea1" id="textarea1" >Текст новости...</textarea>

Все прочие настройки можно изменить в самом фале редактора wysiwyg.js, как пути расположения файла с изображениям кнопочек, так и пути для загрузки изображений на сервер.

Если у вас возникают вопросы по работе с редактором openWYSIWYG, можете смело задавать их в комментариях, я постараюсь ответить.

JavaScript / jQuery     javascript, wysiwyg, редактор