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

Author Роман Чернышов    Category JavaScript / jQuery     Tags , , Комментариев 1 Дата 19 Май

wis Визуальный редактор openWYSIWYGХочу поделиться опытом работы с текстовым редактором написанным на 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.

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

(рис. 1)

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

(рис. 2)

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

(рис. 3)

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

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

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

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

1 Comment to “Визуальный редактор openWYSIWYG”

  • Юрий 23.01.2012 в 8:40 пп

    Возможно всеже его завести в Хроме?

    И второй минус-не переименовывает изображения при заливке. Т.е если с таким именем уже существует, то он не заливает

Оставить комментарий

Консультации

Консультант Чернышов Р.В. Зайдайте вопрос на любую из тем:
Бесплатно и без регистрации!

Задать вопрос
Все вопросы
Последние вопросы
Поиск по блогу
Категории
Архив
Новое на сайте
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

с 2009 года по сегодняшний день, создано более 300 сайтов...