17 сентября 2012 г.

BBEditor - редактор и рендер для страниц с [ВВ] кодами

BBEditor
В данный момент я разрабатываю простой движок для блога на ASP.NET MVC4. Для редактирования текста постов возникла необходимость в простом редакторе с базовыми функциями (жирный, курсив, подчеркивание и др.). Google подсказал ответ в виде CKEditor, FCKeditor или TinyMCE. Но все они редактируют напрямую HTML. Если вы знакомы с  ASP.NET MVC фреймворком то наверняка знаете что просто так внутрь него (через POST запрос) HTML не отправить.
Для того что бы это сделать необходимо на поле модели в котором мы хотим получить HTML применить атрибут [AllowHtml] или же понизить RequestValidationMode до 2.0 (по умолчанию 4.0) в web.config. Что соответственно снжает безопасность. И может позволить сохранить в базе данных опасный HTML. Обойдя например редакторы упомянутые выше прямым пост запросом скажем из Fiddler.
В этот самый момент мне на глаза попалась статья о WysiBB. Мне понравилось в этом редактор возможность видеть HTML во всей красе, а хранить и редактировать BB. А так же можно отправлять POST запрос не содержащий HTML а лишь BB коды. Оставалось только сделать Render для BB кодов которые поддерживает редактор. Вот так и получился BBEditor.
Теперь немного подробностей об изменениях:
  • для подключения редактора необходимо подкючить редактор и рендер для него;
  • на страницах када грузиться BB контент нужно подключить рендер;
  • вся конфигурация вынесена в отдельный файл;
  • все языковые файлы так же вынесены в отдельные файлы;
  • в ренедер интегрированна известная библиотека подсветки синтаксиса Highlight.js;
  • добавленна еще одна тема на основе извесных иконок FatCow.
Использование аналогично оригинальному сайту за исключением рендера. 
<script>
    $(document).ready(function () {
        var viewElement = $("#bbcontent"),
            bbCode = viewElement.html(),
            htmlCode;
        htmlCode = wysibb.render(bbCode);
        viewElement.html(htmlCode);
    });
</script>

Что бы заработала подсветка синтаксиса: 
<script src="http://yandex.st/highlightjs/7.2/highlight.min.js"
        type="text/javascript"></script>
<link rel="stylesheet" 
      href="http://yandex.st/highlightjs/7.2/styles/default.min.css" type="text/css">
Ссылка с CSS файлом подключает тему.
Более подробно об изменениях на GitHub и на демо страницах.
Вопрос к посетителям:
  • Как может повлиять первичная загрузка текста в виде BB кодов на индексацию поисковиками?
Теги: , ,