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

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

Хочу поделиться опытом работы с текстовым редактором написанным на 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, можете смело задавать их в комментариях, я постараюсь ответить.

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

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

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

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

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

Об авторе и блоге Чернышов Р.В. Сертификат. Топ 10% лучших фрилансеров, Чернышов Р.В.

Друзья, всем привет!

Меня зовут Роман Чернышов, я веб-разработчик и данный блог посвящен моим проектам и бизнесу.

Тут я делюсь личным опытом
и отвечаю на вопросы. Я всегда готов к сотрудничеству с вами, готов реализовать проект любой сложности(опыт 10+ лет).

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



Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка