Пока я работал в Мануфактуре реализовал такой редактор https://www.behance.net/gallery/23083103/Polavkam-Internet-Magazine-about-Family-Life

Есть видео https://youtu.be/0JWxNHDtvp4

Сделали его "Блочным" получилось очень ОК! Его легко расширять добавляя новые "виджеты" для редактирования контента. Немного необычное сохранение контента и для бэкенда получилось. У каждого такого блока может быть свой сохраняемый формат. Но это даже плюс. Можно круто играться с этими данными, например делать выборки по данным и выводить их на страницах сайта. Перетаскивать и менять отображение блоков в редакторе — очень просто.

Еще из особенностей — блоки, стили и функциональность редактора используются и в результирующем контенте. Просто некоторую функциональность включаем по модификатору блока. Реиспольузется даже "сетка" построения контента. Так что режиме редактирования контент выглядит ОЧЕНЬ близко к тому что будет в итоге (делать один-в-один не стали, на это есть объективные причины, мы все таки в режиме редактирования находимся). Но в принципе сделать "Превью" не составило никакого труда. Так что реиспользование блоков — по полной.

Поделиться наработками не можем, это продается Мануфактурой как продукт. А вот идея такого редактора витает в воздухе.

Может кого то вдохновлю на создание опенсорс решения. :)

@voischev Круто получилось!

Я бы за создание нормального imperavi style редактора в виде i-bem блока, с использованием bem-components, возможно скоро придется этим занятся. А то что на видео, больше похоже на некий конструктор.

Если речь именно о визивиге для текста, а не о конструкторе для админки в целом, то могу порекомендовать не заниматься велосипедизмом и завернуть любое из существующих решений в обертку типа

modules.define('wysiwyg', ['i-bem__dom'], function(provide, BEMDOM) {

/*borschik:include:../../libs/any-awesome-wysiwyg-you-like/any-awesome-wysiwyg-you-like.js*/

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                anyAwesomeWysiwygYouLike(this.domElem);
            }
        }
    }
}));

});

Это задача с одной стороны достаточно сложная, чтобы не тратить на нее время без суровой необходимости, а с другой на выходе не будет никакого профита от того, что блок будет изначально сделан на i-bem.

@tadatuta я столкнулся когда то с кодом популярного imperavi, взялся за голову, как это вообще работает. Хочется нормального апи, хорошей расширяемости и БЭМ структуры. Чтобы написание скажем простой кнопки не выливалось в дикий ад.

@kompolom я бы за редактор который хранил структуру контента в виде bemjson дерева, после применения к которому BEMHTML шаблона получался контент, но это мое видение, таким же образом можно парсить и markdown.

Хочется нормального апи, хорошей расширяемости и БЭМ структуры

Их же несметные тыщи понаписали, нужно только поискать ;)

я бы за редактор который хранил структуру контента в виде bemjson дерева

Контент человек должен писать, маркдаун гораздо удобнее в этом плане. А из него сгенерировать bemjson — https://github.com/bem-contrib/markdown-bemjson

@JiLiZART +1 за api imperavi )) Он и вдохновляет на написание своего.

@tadatuta обертку уже используем. Не нравится дублирование кода. Кажется что 60% того что написано в редакторе уже есть в bem-core.

Как вам такой вариант: Редактор позволяет добавить в контент один или несколько виджетов. Например:

• markdown
• html
• bemjson
• gallery

Каждый виджет это блок который умеет экспортировать свой контент. При сохранении контент всех виджетов собирается в json и сохраняется в БД. При рендеринге происходит обратное преобразование.

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