Визуальный редактор 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 пп

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

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

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

О блоге и авторе

Добро пожаловать на блог веб-разработчика! На протяжении многих лет, начиная с 2009 года, я занимаюсь созданием специализированных сайтов, сервисов и крупных веб-порталов. Мною было создано несколько сотен сайтов, большинство из которых работают на ПО созданном под заказ, а также на готовом ПО которое я разрабатываю на протяжении всего периода моей деятельности. Это: CMS "Совместные покупки", CMS "osRealty", CMS "Спорт прогнозы" и многое другое.

На страницах моего блога вы найдете множество информации о программировании, о появлении новых разработок, сможете ознакомиться с товарами и услугами которые я предоставляю. А также сможете получить консультацию, заказать разработку сайта или приобрести готовое решение, для реализации собственного проекта.

Поиск по блогу
Категории
Архив
Новое на сайте
Блогеры пишут
  • Роман Чернышов: Для работы капчи на PHP 5.6, замените в файле class.captcha.php строку 264 $ifunc( $this -> i [...]
  • Роман Чернышов: Схема такая: 1) На сайте есть виртуальные кошельки (далее ВК) 2) При пополнении пользователем ВК, [...]
  • Александр: Может скрипт комментариев блокирует сообщения с кодом? Или как длинный текст не проходит?
  • Александр: Пытаюсь в который раз здесь показать код, но страница обновляется, и не сообщения, ни любого оповеще [...]
  • Роман Чернышов: Лично у меня интерес к продаже ссылок пропал уже давно. Преимущество сапы, это то - что ссылки можно [...]
Портфолио Все работы


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 сайтов...