С ростом популярности различных WYSIWYG редакторов, которые довольно неплохо справляются с задачей формирования HTML кода, я обнаружил, что редакторов, которые формируют корректный BBcode, при наличии красивого визуального ввода крайне мало. По правде говоря, на момент начала работы над WysiBB я их не обнаружил их вовсе. Поэтому я начал работу над WYSIWYG редактором ББкодов, так как на проекте использовался именно этот формат входящих данных(BBcode).
Надо признать, что на идею написания редактора, меня натолкнула статья на хабре (http://habrahabr.ru/post/107907/). Именно после ее прочтения, я утвердился в идее создания простого в использовании(с поддержкой визуализации, как в WYSIWYG редакторах), настраиваемого и легковесного BBcode редактора.
В результате на данный момент готова первая альфа/бета/гамма(кому как хочется) версия редактора. Посмотреть редактор в работе можно на официальном сайте. Для работы редактора, требуется javascript фреймворк jQuery версией не ниже 1.4. Решение сделать редактор на базе jQuery было обосновано облегчением в разработке самого редактора и значительным сокращением исходного кода.
Итак для работы редактора, требуется скачать последнюю версию WysiBB с оф. сайта. Так же в случае, если вы не используете на своем проекте jQuery, то необходимо загрузить и его. После загрузки на страницу необходимых JS скриптов, необходимо выполнить функцию вида $('textarea').wysibb().
Этой конфигурации достаточно, чтобы редактор работал со стандартным набором ббкодов.
Для включения только необходимых ббкодов, можно использовать конфигурацию вида.
Где,
'|' — означает разделитель
'-' – означает перенос на новую строку. Все что после этого знака, будет отображаться в новой строке тулбара.
На данный момент WysiBB проходит тестирование для выявления багов, но я надеюст с вашей помощью, я планирую ускорить поиск этих «жучков».
В настоящий момент работающий редактор можно посмотреть на сайте Uagadget в блоке комментирования под новостью. Собственно изначально для этого проекта этот редактор создавался.
Среди интересных особенностей редактора, хотелось бы сразу отметить наличие авто-определения смайл-листов(доступных смайликов), корректная вставка текста из Microsoft Word(без лишнего мусора), обработчик внешних событий на изменение textarea(на большинстве форумов, уже есть кнопки для создания определенного ббкода или вставки смайла, цитаты и т.д в textarea. WysiBB следит за этими изменениями и показывает их в самом редакторе. Это позволяет не переделывать вызовы функций на этих кнопках.), и др.
Это лишь краткий обзор возможностей, более подробно о добавлении своих ББкодов, настройке внешнего вида редактора, добавлении смайл-листов и многом другом будет описано в следующих статьях.
Объективная критика и пожелания по работе редактора только приветствуются. Высказываете свои мнения и пожелания.
Официальный сайт WysiBB
Надо признать, что на идею написания редактора, меня натолкнула статья на хабре (http://habrahabr.ru/post/107907/). Именно после ее прочтения, я утвердился в идее создания простого в использовании(с поддержкой визуализации, как в WYSIWYG редакторах), настраиваемого и легковесного BBcode редактора.
В результате на данный момент готова первая альфа/бета/гамма(кому как хочется) версия редактора. Посмотреть редактор в работе можно на официальном сайте. Для работы редактора, требуется javascript фреймворк jQuery версией не ниже 1.4. Решение сделать редактор на базе jQuery было обосновано облегчением в разработке самого редактора и значительным сокращением исходного кода.
Итак для работы редактора, требуется скачать последнюю версию WysiBB с оф. сайта. Так же в случае, если вы не используете на своем проекте jQuery, то необходимо загрузить и его. После загрузки на страницу необходимых JS скриптов, необходимо выполнить функцию вида $('textarea').wysibb().
Пример простой конфигурации.
<head><br/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><br/>
<script src="http://www.wysibb.com/static/latest/jquery.wysibb.min.js"></script><br/>
<script><br/>
$(document).ready(function() {<br/>
$("textarea").wysibb();<br/>
});<br/>
</script>
</head>
Этой конфигурации достаточно, чтобы редактор работал со стандартным набором ббкодов.
Пример простой настройки
Для включения только необходимых ббкодов, можно использовать конфигурацию вида.
<script>
var myOpt = {
buttons: 'bold,italic,underline,|link,img,|,bullist,numlist,quote,code,spoiler'
}
$(document).ready(function() {
$("textarea").wysibb(myOpt);
});
</script>
Где,
'|' — означает разделитель
'-' – означает перенос на новую строку. Все что после этого знака, будет отображаться в новой строке тулбара.
На данный момент WysiBB проходит тестирование для выявления багов, но я надеюст с вашей помощью, я планирую ускорить поиск этих «жучков».
В настоящий момент работающий редактор можно посмотреть на сайте Uagadget в блоке комментирования под новостью. Собственно изначально для этого проекта этот редактор создавался.
Среди интересных особенностей редактора, хотелось бы сразу отметить наличие авто-определения смайл-листов(доступных смайликов), корректная вставка текста из Microsoft Word(без лишнего мусора), обработчик внешних событий на изменение textarea(на большинстве форумов, уже есть кнопки для создания определенного ббкода или вставки смайла, цитаты и т.д в textarea. WysiBB следит за этими изменениями и показывает их в самом редакторе. Это позволяет не переделывать вызовы функций на этих кнопках.), и др.
Это лишь краткий обзор возможностей, более подробно о добавлении своих ББкодов, настройке внешнего вида редактора, добавлении смайл-листов и многом другом будет описано в следующих статьях.
Объективная критика и пожелания по работе редактора только приветствуются. Высказываете свои мнения и пожелания.
Ссылки
Официальный сайт WysiBB