Как стать автором
Обновить

Комментарии 25

Очень интересная статья, спасибо.

Но скажите, могут ли вашей разработкой пользоваться простые смертные?

Не профессиональные блогеры и не контент-маркетологи, не представители профессиональных контент-команд и не агенства, издатели и бренды? И не некоммерческие организации, не независимые медиа и не благотворительные организации?
Да, разумеется :-)

В частности, у нас есть плагин для WordPress, который можно установить на любой сайт под управлением этой CMS. Если есть задача прикрутить сайт к другой платформе, у нас есть гайд по кастомной интеграции.
Хм. Я пошел на ваш сайт, посмотрел на тарифы и ужаснулся. Нет, я понимаю, для серьезного издания эти 468 баксов в год — копейки, но не для человека, который пишет в свой блог статьи хорошо если два раза в месяц.

Я правильно понимаю, что с плагином для вордпресса мне не потребуется никаких дополнительных плясок с бубном, кредитными картами и прочим?
Всё верно! Можно установить WP-плагин и пользоваться редактором без регистрации и SMS. Плясать с бубном можно только когда будете праздновать первый красиво сверстанный пост.
Sign up for Setka Editor Free plan to create your own post style with branded fonts, colors and other visual elements and customized grid system.

Это простым смертным нужно? ;-)
Если вам будет недостаточно наших дефолтных стилей и сеток — да, можете зарегистрироваться и создавать свои собственные.
Спасибо, хороший ликбез. Можете что-то сказать по поводу github.com/ianstormtaylor/slate? Пока что в бете, но выглядит многообещающе.

Как писавший RTE на draftjs и slatejs, могу суазать, что slate для людей, поразила документация.


Из минусов — злили примеры и плагины, они не оптимально написаны и несовместимы, фактически, как только разберёшься в библиотеке и начнёшь усложнять редактор, окажется, что половину (плагины и свой код) надо переписать. Отсутствие любых действительно сложных примеров в написании блоков.

Это всё конечно очень классно, но посмотрев ваш блог не увидел по факту каких либо специфичных решений. То есть `Setka` избыточна для обыденных записей.
Посмотрите лучше другой наш блог — Accent, там много примеров постов с нестандартной версткой.

Но должен отметить, что одной из целей создания Setka Editor было как раз упрощение создания тех самых «обыденных» постов, которые на потоке выпускаются каждый день. Например, при выпуске новостей на The Village редакция использует «сниппеты» — заранее сохраненные и утвержденные блоки, куда остается вписать только соответствующий текст в нужные поля.

Несколько примеров:
www.the-village.ru/village/city/news-city/304459-german-o-zhizni-v-rossii (блок цитаты)
www.the-village.ru/village/city/news-city/303601-ethno-park (таблица рейтинга)
www.the-village.ru/village/food/place/303767-neko (блоки в правой колонке)

То, что когда-то давно версталось вручную или при помощи HTML-заготовок, теперь вставляется одним кликом.

Сколько мучений ради того, что бы накодить "редактор" на языке, не предназначенном для программирования. По-хорошему должен быть какой-нить <input type=richtext>, реализованный в движке браузера, имеющий всё нужное и учитывающий кастомизацию, сделанную пользователем браузера. Но нет, вместо такой нужной вещи они лучше придумают какое-нить новое css-свойство для закругления углов блоков.


Вставляется тег <font>, который мы уже не видели на сайтах с начала 2000-х годов

А я и сейчас его использую. Если нужен именно размер шрифта как самоцель, а не как следствие семантики — то вроде бы это как раз то что нужно. Ну а для семантики, очевидно, нужна не команда fontSize, а какая-нить setClass (может быть такая даже есть) или добавлялка <h1> и подобного.

Не в языке дело, а в самой задаче. Я лично уже давно не верю в хороший визвиг. Расставляя теги вручную я получаю гораздо более предсказуемый результат, к тому же — почти не трогая мышку.
Да, это определённо лучшее решение.
Нет, contenteditable можно только назвать тем, из чего следовало сделать такой элемент, а не забивать на него 10 лет назад, как это сделали авторы браузеров. В нём нет интерактивных кнопок для управления редактированием, из него нельзя аналогично остальных input-ам забрать содержание, его нельзя напрямую отправить с формой. А я имел ввиду именно такое, которое просто работает после вставки ОДНОГО короткого тега на нужное место и сразу с приемлемым интерфейсом.
еще забыли redactor от imperavi упомянуть. Правда он дорогой :)
Да, согласен. Тысячи их! :)
Quill, Draft.js и Trix хороши, но ни в одном нет поддержки таблиц. Почему так происходит и почему при проектировании их не заложили? Как с таблицами обстоит дело в вашем редакторе?
Насколько я понимаю, для Quill и Trix таблицы не слишком важны, т.к. эти редакторы в первую очередь нацелены на короткие форматы вроде комментариев.

По поводу Draft.js — я общался с одним из его разработчиков на Holy.js в декабре 2016, он прямо ответил, что таблицы сделать сложно из-за внутренних особенностей структуры данных (кажется, речь шла о сложности хранения вложенных сущностей таблица — строка — ячейка).

У нас одна из ключевых сущностей редактора — сетка. Это больше, чем таблица; сетки используются в целом для формирования многоколоночной верстки страницы. Например, вот пример поста с 12-колоночной сеткой. Сетки могут быть любой вложенности.

При этом обыкновенные таблицы у нас тоже появятся в одном из ближайших релизов.
Да, вы правы. У Quill есть открытое issue по этому поводу.
github.com/quilljs/quill/issues/117
Сложно им в свою, достаточно плоскую, модель добавить поддержку настолько вложенного элемента, как таблица.
Странно, почему в качестве «первого» возможного редактора несколько раз навязчиво упоминается — MS DOS Editor, если все еще здравствующий и более функциональный vi гораздо старше?
Опять же, текстовые редакторы появились задолго до DOS, и в некоторых уже были даже регулярные выражения.

Вдобавок, под MS-DOS был такой себе «Слово и Дело», был Lexicon.
Были и другие менее известные редакторы, которые не могли выдавать rich текст на экран, но могли выдавать rich текст с основными эффектами (смена шрифта, размера шрифта, наклон, подчеркивание, bold) на принтер.
Согласен с вами, vi занимает почетное место среди текстовых редакторов. В докладе MS DOS Editor фигурировал один раз, а в статье просто добавили подводку с его же упоминанием.
Есть еще один фреймворк для построения rich редакторов bustle/mobiledoc-kit Возможно кто слышал/работал с ним? Там тоже стейт хранится в JSON.
Есть некоторая проблема редакторов, использующих свои модели хранения данных.
Приведенные вами хорошие, современные редакторы полностью контролируют состояние редактируемого элемента и не дают никакой возможности работать с этим элементом посредством стороннего кода. Нет возможности извне обернуть часть текста в, предположим, span с дополнительными классами и атрибутами.
Это нужно, к примеру, для сторонних скриптов проверки орфографии и грамматики, которые ничего не знают о вашей модели и моделях других современных редакторов. После какого либо изменения, внесенного таким скриптом, отрабатывает ваш слушатель на MutationObserver и изменения отменяются, как не валидные для вашей модели.
И я не нашел у этих редакторов нормальных путей расширения модели и добавления кастомного маркапа в них. Получается замкнутая система, нет чего то общего для возможности работы с этими редакторами из вне. Нужно писать дополнительные плагины, что не представляется возможным учитывая взрывной рост числа новых, хороших редакторов.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий