WysiBB — WYSIWYG BBCode редактор

[@cheremushkin]

Был же такой пост совсем недавно.

[@frentsel]

хороший редактор. Простой.

[@wbb]

Это был пост в песочницу. Только он был не такой и там не было возможности комментировать его. Мне интересно именно мнение хабра пользователей по поводу проекта.

[@melervand]

хотелось бы иметь возможность загрузки изображения на сервер через ajax (ну кроме вставки ссылки)

[@wbb]

Интересная идея. Думаю в добавим в разработку.

[@melervand]

туда же всякие вставки видео youtube/vimeo и загрузка flash/swf файлов

[@oENDark]

Обязательно добавьте, без неё мало кто поставит себе на сайт ваш редактор.

[@wbb]

В WysiBB уже можно загружать изображения с локального компьютера. По умолчанию, используется хостинг картинок imageshack.us. Но можно подправить файл impupload.php, который идет в сборке и настроить сохранение картинок у себя на сервере.

Демо с загрузкой картинок на imageshack здесь

[@unrealphp]

Очень давно искал для своих проектов. Потом сам написал. Но это очень важная вещь, особенно для новичков. Так что статья заслуживает уважения.

[@xamelion]

Очень здорово, сам на днях думал написать визуальный редактор для BBCODE. У вас нет желания выставить его на github чтобы можно было подключиться к разработке! И второе, неплохо было бы добавить визуальное создание таблиц, как в Microsoft Word или Libre Office!

[@wbb]

На github репозиторий уже есть — github.com/wbb/WysiBB

[@mihmig]

Хотелось бы применить Ваш редактор для установки на простой сайт-визитку (без CMS И фреймворков), есть пара вопросов:
1. Ни в вашем редакторе ни в TinyMCE нет возможности «вставить» картинку «с диска Це» т.е. тут же «залив её на сайт». Не совсем удобно объяснять девочке, что картинку надо сначала залить (пусть даже на этот же сайт), а потом скопировать какой-то «урл»…
2. А чем лучше отображать bb-код?

[@n0ne]

Ну к TinyMCE без проблем прикручивается elFinder…

[@pietrovich]

BB-код, как минимум, проще фильтровать.

[@Serator]

Говоря о TinyMCE сложно сказать, что он чего-то не умеет. В том числе и файлы любого вида вставлять (изображения в том числе). Да и bb-код он тоже знает…

Собсветнно вот пример с вставленным изображением с ихнего сайта — http://www.tinymce.com/tryit/full.php. Если стандартный менеджер изображений является плантым, то это не означает, что его нет. Да и бесплатные от пользователей тоже имеют место быть…

+ пример с bb-кодом — http://www.tinymce.com/tryit/bbcode.php.

[@DedalX]

На офф сайте опечатка в кнопке «Уставновить на сайт»

[@wbb]

Спасибо. Исправил.

[@Ghostwriter]

Нужна поддержка Markdown.

[@MechanisM]

Вообще хотелось бы более подробной документации по функционалу. Откровенно говоря, кода очень много, и такие штуки как модальные окна можно использовать еще и в других частях сайта так почему бы не отделить этот код и дать возможность людям подключать свои модальные окна?(например я пользую Twitter Bootstrap Modal, кто-то юзает модальные окна из jQuery UI итд итп) Напишите доки чтобы можно было отключить лишний код и использовать уже имеющиеся решения которые уже проверены и стилизованы под проект. Да и чтобы все было выдержано в одном стиле а не зоопарк. Далее, увидел что в фидбэке просят добавить загрузку картинок, можно например прикрутить imgur(прокрутить вниз для примера на javascript) или imageshack как это реализовано у Nicedit. Ну и опять-же документация нужна чтобы люди свои бэкенды для загрузки фоток, видео итд написали. Вообще, если честно, проект выглдят странно, как-будто его не написали с нуля, а склепали из разных кусков других редакторов. Смайлы почему-то внизу итд итп. Да и код можно оптимизировать и сделать ваш редактор более легким.

[@MechanisM]

Я не предлагаю совсем выбросить модальные окна, я предлагаю написать нормальные доки, чтобы эти-же самые модальные окна из вашего редактора можно было использовать не толкьо в WysiBB а и в других компонентах. Тоесть чтобы был выбор что использовать какие-то свои к которым привык и не один год пользуешься или которые лишним грузом идут с редактором.

[@wbb]

1. На счет модальных окон. Идею понял, единственное думаю не сильно ли это усложнит настройку самого редактора. В общем повод для размышлений.
2. На счет загрузки картинок, согласен. Принято в разработку.
3. Документация, как я и писал в посте пока не вся. Не все сразу, постепенно буду дополнять и исправлять, чтобы было понятней пользователям.
4. Редактор написан с нуля, но на счет оптимизации кода согласен. Просто не все сразу, проект еще очень молодой. Оптимизация будет проводится, как только будут выловлены основные баги и доработан необходимый функционал.

[@MechanisM]

А почему не выложили на github? Там бы подключились другие разработчики и помогали бы развивать проект. Я уже вижу что бы я улучшил в вашем коде.

[@wbb]

Выложил http://habrahabr.ru/post/147512/#comment_4973020

[@MechanisM]

Хорошо, а то я пропустил этот комментарий, а на сайте редактора нет ссылки =(

[@Evengard]

ДА! Спасибо! Искал давно именно подобное!

[@l0cal]

Как редактор действует с не поддерживаемые тегами?
Например я скопировал контент с сайта с плохой/сложной разметкой и вставил сюда

[@wbb]

Удаляет такие теги при собитии «paste».Но если все, кто-либо вставить такие теги, каким либо другим способом, то при генерации ББ кода, стрипает такие теги оставляя только их текстовое содержимое.

[@Keyten]

Прекрасная разработка, спасибо большое.

Есть просьба к автору: уберите из него Comic Sans MS. А то ведь пользуются…

[@wbb]

Список доступных шрифтов можно настраивать. Как это делать, детально опишу в документации.

[@winbackgo]

Хорошо бы еще возможность переключения WYSIWYG/Source.

[@wbb]

Она есть, в правой части тулбара редактора кнопка «BBcode».

[@nswbit]

Идея совершенно верная, хороший opensource редактор именно для bbcode — совершенно необходим.
Подозреваю, что если проект будет разрастаться, то будут появляться достаточно редкие теги.

Каждый программист, вставляющий на сайт редактор bbcode также думает и о безопасном преобразовании его обратно в html.
Думаю будет очень удобно, если в проекте будут примеры server-side реализаций для обработки этих тегов, к примеру на php или python.

Спасибо!

[@unrealphp]

Желательно массив со всеми использованными тегами получить, чтобы не искать все используемые редактором теги, когда будешь писать парсер =)

[@Squier]

А чем он лучше 10-20 похожих WYSIWYG редакторов?

[@wbb]

Тем что это WYSIWYG BBCode редактор.

[@Squier]

Знаю около 5 WYSIWYG BBCode редакторов, гугл наверное еще пять-десять выведет.

[@MechanisM]

Я тоже знаю много самых разнообразных, но разве плохо когда есть выбор?

[@Squier]

Когда есть выбор — хорошо.
Когда не говорят о плюсах редактора по сравнению с остальными — плохо.

[@wbb]

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

[@Evengard]

Назовите плз. С лёгким добавлением кастомных BB кодов.

[@MechanisM]

У markitup очень легко добавлять.

[@Evengard]

Ну сколько можно повторять, что markitup — НЕ WYSIWYG абсолютно!

[@MechanisM]

а что мешает его в WISYWYG превратить?

[@Evengard]

С таким же успехом можно и свой с нуля написать.

[@Squier]

Всегда на сайтах фигачил SCEditor. Добавление кастомных зависит от вашего умения, я почти во все те, с какими работал, добавлял функционал и даже не задумывался о проблемах.
Есть WYSIWYG BBCode Editor, есть CKEditor, есть штук пять на гитхабе еще.

[@Evengard]

Смотрел перечисленные кроме sceditor (спс гляну) — чтоб добавлять кастомные бб коды там надо нехило заморочаться с редактированием движка. Здесь с этим не в пример проще.

[@Evengard]

Кстати за SCEditor спасибо — там действительно есть API для добавления своих BB тегов.

[@MechanisM]

Еще в качестве пожеланий хотелось бы видеть автоматическое сохранение введенного текста в localStorage чтобы если случайно закрыл/перезагрузил вкладку или бразуер закрэшился весь введенный текст сохранился и потом отобразился…

[@SegaZero]

какая-то беда с поддержкой кириллицы в опере и ие9.

как, впрочем, и весь wysiwyg, уж извините.
на других браузерах не проверял.

плюс не увидел реализации таблиц, подсветки кода.
а проект интересный, однозначно нужен. если все это сможет работать на локальных html страницах — так вообще отлично:)

[@wbb]

Проблема с кодировкой была связана не с редактором, а со скриптом который получал bbcode и выводил на страницу. Уже исправлено.

[@wbb]

Создание таблиц в разработке. Скоро будет.

[@Mox]

Было бы круто иметь что-то такое для markdown/textile

[@Hyzhak]

есть странное поведение, возможно бага — если выделить окно редактора и drag'n'drop его в сам редактор, то получаем работающий редактор в самом редакторе %)

вот скриншот:

[@wbb]

Новая версия редактора 0.5.7. Исправлены мелкие баги. Добавлена возможность выбора цвета текста.

Пробуйте.

[@wbb]

На оф. сайте WysiBB заработал форум поддержки. Со всеми вопросами и проблемами теперь можно заходить на него.

[@wbb]

А тем временем, WysiBB уже достиг версии 0.6.1. В нем уже есть возможность вставки таблиц, табуляции.

Приятно, что к разработке подключаются и другие умы. Всех желающих, улучшить продукт, я приглашаю на GitHub и форум поддержки WysiBB.

[@maxic]

В модальных окнах — потеря фокуса при добавлении/редактировании ссылок, т.е. дополнительного всплывающего модального окна wisybb. Т е невозможно поставить курсор в поле input ввода ссылки, такое возникает при использовании как модального окна, распространенный colorbox jquery виджет