CmsPlugin.ru
Обзоры популярных CMS и плагинов. Рекомендации по созданию и продвижению сайтов

WysiBB - легкий WYSIWYG BBCode редактор

/ Автор: / Просмотров: 13717

Логотип WysiBB

Бесспорным преимуществом визуальных редакторов является их наглядность и удобство в плане форматирования текста при написании сообщений в блогах и на форумах. Пользователю не требуется знания HTML, чтобы красиво оформить текст. Но это лишь в теории, на практике реализация подобного редактора является нетривиальной задачей. Несмотря на существование большого количества WYSIWYG редакторов, BBCode разметку поддерживают далеко не все. До недавнего времени выбор был невелик - либо использовать "тяжеловесов" типа TinyMCE, либо доделывать имеющиеся менее популярные решения. Но с появлением WysiBB ситуация может измениться в лучшую сторону.

WysiBB - WYSIWYG BBCode редактор на jQuery

Основные возможности WysiBB:

  • Визуальный ввод BBCode;
  • Подключение только необходимых вам ББ кодов;
  • Добавление собственных ББ кодов;
  • Поддержка работы на мобильных устройствах (iOS, Android, Windows Phone);
  • Поддержка браузеров: Google Chrome, Mozilla FireFox, Opera, Safari, EI7+;
  • Простая установка на любой форум или web-сайт.

Внешний вид редактора:

WysiBB редактор

Подключение:

Традиционное для jQuery - в <head></head> необходимо разместить строки

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="/js/jquery.wysibb.min.js"></script>
<link rel="stylesheet" href="/css/default/wbbtheme.css" type="text/css" />

Вместо Google jQuery можно скачать оригинальную библиотеку.

Далее добавляются необходимые встроенные ББ коды с помощью конфигурации параметра buttons

<script>
$(document).ready(function() {
var wbbOpt = {
  buttons: "bold,italic,underline,|,img,link,|,code,quote"
}
$("#editor").wysibb(wbbOpt);
});
</script>
.....
<textarea id="editor"></textaera>

Дополнительные возможности:

  • Настройка простого модального окна;
  • Подключение собственного модального окна;
  • Подключение собственных обработчиков;
  • Подключение языков;
  • Набор API;
  • Горячие клавиши.

Преимущества WysiBB:

  • Всё работает "из коробки";
  • малый размер и потребление ресурсов;
  • Редактор создан украинским разработчик, поэтому сообщить о проблеме или обратиться за консультацией на русскоязычный официальный форум не составит труда.

Недостатки:

  • Как и у любого нового проекта существуют ошибки, связанные с малой "обкатанностью" на реальных web-проектах.

Данный редактор был выбран для форума CmsPlugin.ru, работающего на движке FluxBB. Интеграция и настройка оказалась действительно несложными. Правда из-за "недовольного" смайла :/ пришлось подправить код форума, но, скорее всего, в новых версиях редактора эта и другие мелкие недочеты будут исправлены. В дистрибутиве находится два файла jquery.wysibb.js - "читабельный" (Developer version) и сжатый (Production version). В целом работа с WisyBB оставила приятное впечатление.

Краткая информация:

Системные требования:

- Библиотека jQuery 1.4+

Статус: бесплатный

Тип лицензии: MIT (GPL-совместимая)

Интерфейс: русский, английский

Размер дистрибутива: 57.1 KB / 192 KB

Официальный сайт: www.wysi.com

Скачать WysiBB

Опробовать в деле редактор можно на нашем форуме или официальном сайте.

Комментариев: 4 RSS

Ну да... поддерживается. Форум поддержки вымер, ответов нет. Косяков много, заставить работать с аякс не выходит.

Александр Гальвита2 2013-11-07 в 16:06:03

Prowler, да, вы правы. Совсем недавно еще заходил на их сайт, странно.

Хоть и старый редактор, но работает. Спасибо!

$(document).ready(function() {

var wbbOpt = {

buttons: "bold,italic,underline,|,img,link,|,code,quote"

}

$("#editor").wysibb(wbbOpt);

});

.....

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

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Ваш комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)