Один проект очень помог нашему бизнесу. Редактор Editor.js сохраняющий исходный код в JSON.
Главной преимущество редактора это хранение и представление данных в JSON формате. Особенно поймут те у кого есть и веб-версия продукта и мобильное приложение. Для написание статей контент менеджеры любят использовать WYSIWYG-редактор, но после этого получаем «спагетти»:
«Спагетти» просто убивали всю верстку и интегрировать их в мобильные приложения было просто болью. Приходилось отдельно писать статью под веб-версию и мобильное приложение. Это долго и тяжело поддерживать.
Компромиссом является формат JSON. Он простой, имеет строгую структуру и гибкий. В админ панель добавляем Editor.js редактор, пишем контент и сохраняем его как JSON. По API отправляем мобильному приложению JSON и оформляем уже дальше его как нужно, а на веб-версию JSON конвертируем в HTML через Editor.js. И всем счастье.
Ребята предоставляют API для создании своих плагинов. На сайте хорошая документация с примерами. Используйте!
Комментарии (29)
vers
03.04.2019 21:20Все блочные редакторы на contenteditable, которые мне удалось нагуглить (включая и Editor.js), страдают от одной и той же проблемы: выделение текста ограничено одним блоком. То есть, если вы нажмете левую кнопку мыши в середине одного параграфа и переместите указатель мыши на середину следующего параграфа, чтобы выделить несколько предложений, то выделение текста остановится на конце первого параграфа. Да, в Editor.js есть еще и «прямоугольный» режим, который позволяет вам выбрать все блоки, попадающие в указанную мышью прямоугольную область, но во-первых, это не совсем типичное поведение для текстового редактора (пресловутый контент-менеджер, привыкший работать в Microsoft Word, может и не догадаться, что так можно), а во-вторых, выделяется либо сразу весь блок, либо ничего — часть блока таким образом не выделить. Ну и плюс с клавиатуры такое не сделать, только мышью.
В некоторых ситуациях эта проблема несущественна, например, если вам нужно быстро набрать большое количество текста с минимальными правками. Но если вам приходится часто заниматься редактурой уже написанных текстов, перемещая одни куски текста и переписывая другие, то WYSIWYG Markdown-редакторы могут оказаться удобнее в использовании.n1cebro
04.04.2019 17:15Думаю что это не было бы проблемой если бы где-то рядом была кнопка переключения в режим просмотра и обратно в режим редактирования
vers
05.04.2019 04:37Не совсем понял, как это могло бы помочь. Или вы предлагаете переключиться в режим просмотра, выделить текст, переключиться обратно, и чтобы выделение сохранилось? Мне кажется, так сделать не получится, потому что смежные параграфы реализованы отдельными contenteditable-блоками. Представьте, что каждый параграф — это отдельный textarea, просто без рамок. Очевидно, что нельзя начать выделять текст в одном textarea и продолжить выделение в следующем.
Вообще в стандартных контролах для редактирования текста (как в браузере, так и в десктопных приложениях) существует много "мелочей", которые, как мне кажется, большинством людей воспринимается как данность, доступная повсеместно из коробки или же легко реализуемая. Помню, как в самом начале моей карьеры тимлид поручил мне "набросать по-быстрому простой WYSIWYG-редактор" для десктопного приложения, которое мы разрабатывали. Все нужно было отрисовать на Windows GDI: рамку, курсор, скроллбар, выделение, ну и, конечно, отрендерить сам текст. К счастью, никаких картинок или таблиц. По оценке тимлида у него бы на это ушло два дня, но поскольку я был тогда джуниор, то мне он щедро выделил аж целых четыре дня. У меня на все это ушло три недели с дикими овертаймами. (К концу разработки мне уже в буквальном смысле снились кошмары про то, что я забыл учесть кернинг при расчете ширины текста.) Еще через неделю, после того, как это ушло в продакшн, пользователи прислали нам несколько десятков багрепортов вида: «А что это я тут нажимаю Shift+Ctrl+End (выделить от курсора до конца текста), а оно не работает?» Еще через две недели, потраченные на то, чтобы попытаться все это реализовать, тимлид плюнул и решил заменить наш контрол на стандартный RichTextBox. Пусть он корявый и ущербный (например, выравнивание текста по ширине, которое так хотел тимлид, в нем не поддерживается), но зато все "мелочи" в нем, в отличие от нашего велосипеда, реализованы на 100%.
В вебе ситуация еще более плачевная, поскольку к итак уже непростой задаче добавляются еще и ограничения браузера (если, конечно, вы не на канвасе все вручную рисуете — но тогда вам остается только посочувствовать). Есть прекрасный блог Content Uneditable от разработчиков CKEditor и вводная статья ContentEditable?—?The Good, the Bad and the Ugly, которая наглядно показывает масштаб проблемы, с которой сталкиваются начинающие разработчики, которые решили разработать свой онлайн-редактор и еще не подозревают, сколько "мелочей" им придется реализовать самостоятельно. Проиллюстрирую на примере Editor.js. Возьмем несколько абзацев текста, кликнем в середину первого абзаца и несколько раз нажмем кнопку "вниз" на клавиатуре. Сначала посмотрим, как это работает в "обычных" текстовых редакторах (Microsoft Word в качестве примера):
Обратите внимание, как Word старается, по возможности, точно сохранить горизонтальную позицию курсора при переходе между строками и абзацами.
Теперь тот же самый эксперимент на главной странице Editor.js:
Можно заметить, что при переходе между смежными абзацами позиция курсора теряется. (Плюс еще в конце каждого абзаца курсор сначала прыгает в конец строки перед переходом к следующему абзацу — ожидаемое поведение, если вспомнить, что каждый абзац ведет себя как отдельная textarea.) Можно возразить, что это мелочи — подумаешь, придется лишний раз кликнуть мышью — но из таких мелочей и складывается тот самый "user experience". Представьте себе контент-менеджера, годами пользовавшегося редакторами, которые ведут себя подобно Microsoft Word. У него все эти "мелочи" уже чуть ли ни на уровне мышечной памяти, поэтому процесс привыкания к поведению нового редактора у него будет выглядеть как-то так: нажал что-то на автомате -> получил неожиданный результат -> удивился -> вспомнил, что тут все не так -> в очередной раз проклял разработчиков -> исправил и продолжил работу до возникновения следующей проблемы. В результате он либо все-таки переучится, ценой потраченных нервов, либо плюнет на все и будет набирать текст в Word, а затем копировать результат в онлайн-редактор.
n1cebro
05.04.2019 10:25Вижу как эта тема болит у вас :) Я сам сталкивался с редакторами и даже пробовал написать свой по молодости но быстро понял насколько это не подьемная задача. Моя идея была в том, что бы дать пользователю возможность выделить текст независимо от редактируемых блоков, тоесть переключить в режим просмотра без блоков. Не уверен можно ли будет реализовать удаление в этом режиме, но как минимум можно будет скопировать часть текста.
AlexanderAstafiev
Markdown не понравился?
kal1sha Автор
Markdown хороший, но для разработчиков. Не охота было ему обучать и контент менеджеров. Хотели просто предоставить редактор и все. Чтобы они даже не знали что такое JSON или Markdown, но чтобы в базе хранилось в красивом виде.
AlexanderAstafiev
Извините, но самое сложное в markdown — помечать заголовки символами "#"… Разве обучить менеджера markdown сложнее, чем написать текстовый блочный редактор со встроенным html-конвертером?
kal1sha Автор
Подскажите где взять редактор markdown для django и чтобы можно было и писать туда свои плагины? Если подскажите мы подумаем и может перейдем.
AlexanderAstafiev
Ну, первое, что гуглится — какой-то Martor, его вполне должно хватить, судя по фичам. А какие Вы хотите плагины?
kal1sha Автор
У вас есть с ним опыт? Как туда плагины свои вставить?
AlexanderAstafiev
Опыта именно с этим редактором нет, насчет плагинов не знаю. Какие именно плагины вы хотите?
Markdown — это же просто соглашение о том, как писать текст. По этим соглашениям можно описать в простом тексте форматирование (жирный, курсив), абзацы, заголовки, списки (нумерованные и ненумерованные), картинки, простые таблицы. Вам необходимо использовать еще что-то кроме этого?
kal1sha Автор
Ну если вы не знаете за плагины, то зачем вы пишите людям как нужно делать?
Нам нужно интегрировать glvrd.ru как нам его впихнуть в ваш Martor?
А вот в Editor.js мы его интегрировали за 30 минут. Понимаете?
xa3apg
Поспешили вы с вопросом, а можно было уделить пару минут и посмотреть на исходники. Расширяется через extensions, которых с данным редактором идет 5 штук, вполне наглядный код. Да и подключаются в соответствующей секции в settings.py.
Но, как говорится, на вкус и цвет все фломастеры разные… лично мне ближе markdown, другим подойдет json формат :)
kal1sha Автор
PostgreSQL имеет тип для json, а как мне хранить markdown? Просто как текст? Нет, спасибо.
Cerberuser
И много преимуществ Вы получаете от того, что в базе текст статьи хранится как json, а не как текст?
kal1sha Автор
Конечно! Я работаю с данным из поля без дополнительных преобразований.
Cerberuser
Уточню: много ли преимуществ, не опирающихся на то, что Ваш редактор использует json? Или ещё точнее: что Вы такого делаете с текстами статей вне редактора, что json Вам в этом помогает?
kal1sha Автор
Когда в мобильном приложении рендерю данные я должен по строчно понимать, что это за формат и какой там текст внутри. Типа:
Или например список:
React native получает объект и с ним работает, как мне получить такой объект в переменную в react native?
KvanTTT
Так есть WYSIWYG Markdown редакторы, в которых синтаксис знать не обязательно. Например, онлайновый StackEdit и оффлайновая https://typora.io/.
kal1sha Автор
Я его использую на Mac Os, он хороший но там же нету API. Или уже добавили?
PaulMaly
Уже довольно давно есть компромиссный вариант с плагинами: madebymany.github.io/sir-trevor-js
Coffin
как на маркдауне написать статью в которой будут слайдеры с фотками и с возможностью показывать эти слайдеры с разными «темами», так еще и чтобы никому не пришлось учить макрдаун, ведь у всех вокруг «лапки»?
Cerberuser
А как её написать в любом другом формате? По идее, вставить соответствующий блок, внешний по отношению к формату. Или где-то это есть "из коробки"?
Coffin
Описать в JSON нет проблем
Cerberuser
То есть, не нужно учить markdown, а нужно учить JSON?
Coffin
Смысл визуальных редакторов в том, что тебе не нужно ничего учить, а надо тыкать в кнопочки и картинки.