Почему нам пришлось создать «ещё один» текстовый редактор

Привет! Меня зовут Евгений Финкельштейн, я руководитель разработки в ITSumma и один из разработчиков текстового редактора Textarena.

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

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

Текст

Мы убрали всё, что могло отвлекать от написания текста. Но при этом не потеряли ничего, что нужно для его оформления.

Так выглядит окно редактора в Editorica.

Чтобы применить форматирование (жирный, курсив, вроде того), достаточно выделить текст и выбрать нужный вид оформления в появившейся панельке.

Выделили текст для применения форматирования.

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

Открыть панельку можно нажав на плюс мышью или Tab на клавиатуре.

Горячие клавиши

Горячие клавиши помогают не отрывать руки от клавиатуры и быстрее набирать текст. Поэтому мы назначили горячие клавиши на все команды и сделали подсказки.

Выделили текст, зажали Ctrl (⌘ ), увидели подсказки — что нажать, чтобы применить форматирование.
Нажали Tab, зажали Ctrl + Alt (⌘ + ⌥ ) — получили подсказки для новых блоков.

Картинки

Для статей нужны изображения (фоточки и картинки). Чтобы иллюстрации были чёткие и быстро грузились, они должны быть подходящего размера и правильно сжаты. Также это важно для поисковиков — сайт с картинками, которые удовлетворяют рекомендациям Google Pagespeed, находится выше в поисковой выдаче.

Для этой непростой задачи мы разработали собственный сервис обработки изображений. Он работает в фоне — пользователю админки не надо ни о чём думать. Просто кидаешь картинку в редактор, а Textarena и сервис для картинок переведут картинку в современный формат WebP и создадут столько размеров изображений, сколько нужно для вашего сайта.

Сохранением, ресайзом и раздачей занимается наш сервис для картинок. Он крутится в Kubernetes, картинки складывает в Amazon S3, а раздаёт через CDN Cloudflare. Каждый клиент-приложение получает токен, чтобы грузить картинки или менять конфигурацию сервиса.

Пару слов о том, сколько же нужно изображений. Допустим, ширина колонки на сайте 800 пикселей. На планшете колонка сужается до 700 пикселей. Для мобильных устройств сделаем шаг в 100 пикселей. Получим набор: 800, 700, 600, 500, 400, 320(последнее специально для айфона 5S) пикселей по ширине.

Для retina-дисплеев каждый размер нужно удвоить, то есть уже имеем: 1600, 1400, 1200, 1000, 800, 700, 640, 600, 500, 400, 320.

Для флагманских мобильный устройств с 4К-экранами Google советует использовать четырёхкратное увеличение. Итого для каждой иллюстрации нам может понадобиться 13 вариантов разрешений: 2000, 1600, 1400, 1280, 1200, 1000, 800, 700, 640, 600, 500, 400, 320 пикселей по ширине.

Но это ещё не всё. Google настоятельно рекомендует использовать формат сжатия изображений WebP — именно в него мы и переводим все картинки. Он меньше по объёму и ему в отличие от JPEG не 30 лет. Но старые айфоны не поддерживают WebP, поэтому каждый размер мы храним в двух форматах: в оригинальном и в WebP.

На самом деле, для одной иллюстрации может быть ещё больше файлов. Например, картинка внутри статьи и в ленте может отображаться по-разному. Конечно, такой дизайн — это дополнительная работа для фронтендеров, но чтобы он выполнял свою функцию и работал как задумано, надо предусмотреть разные разрешения для разных форматов материала. Например, в Reminder до 40 файлов на одну картинку.

Получается, на каждую картинку, загруженную в статью, мы создаём, храним и раздаём 26 файлов.

Типографские символы

Мы за чистоту письменной речи и грамотность типографики, поэтому встроили в редактор все необходимые типографские символы. За основу взяли Типографскую раскладку Ильи Бирмана. Конечно, её можно поставить на компьютер (что и советую, чтобы использовать типографику в остальных редакторах), а Textarena поможет использовать привычные сочетания и вставлять спецсимволы независимо от настроек или, например, на чужом ноутбуке. Чтобы увидеть подсказки, нажмите кнопку со знаком вопроса в футере: например Alt + дефис вставит длинное тире, принятое в русских издательских правилах.

Textarena полностью конфигурируется под нужды редакции. Мы можем добавлять хитрые сочетания клавиш, который сделают подготовку публикации быстрее. Например, если в редакторе ввести два дефиса подряд, они превратятся в длинное тире «—».

Там же в футере есть кнопка для автоматического исправления типографики и счётчик символов и времени чтения статьи.

Блоки со сложным оформлением

Главная причина, почему мы сделали собственный текстовый редактор, в том, что каждому нашему клиенту нужно что-то своё, разное и непростое. Речь идёт о сложно оформленных текстовых блоках. Для примера возьмём блок цитаты:

Он органично вписан в редактор. Не обязательно делать что-то мышью, курсор двигается внутри блока как во всём остальном тексте.

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

А ещё эмбеды. В Textarena сейчас поддерживается: Vimeo, YouTube, Coub, Vine, Imgur, Twitch, Яндекс.Музыка и Подкасты, Instagram, Twitter, Pinterest, Facebook.

Можно ли мигрировать в Эдиторику?

Если у вас уже есть сайт и написано множество статей или новостей, как перенести их? С помощью плагинов легко сделать так, чтобы старые посты не потеряли своё оформление.

Чтобы распарсить статью, написанную в другом редакторе, мы настраиваем парсер так, чтобы он понимал, какой элемент старого редактора относится к какому элементу оформления Textarena.

Выглядит так же, как на сайте

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

Как попробовать

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

Мы понимаем, что на первый взгляд Textarena может показаться «yet another» редактором, но мы много работаем с изданиями и знаем, как трудно (а порой невозможно) адаптировать популярные решения под нужды медиа. Мы хотим, чтобы в нашей CMS «из коробки» был классный редактор для админки, за который не нужно переплачивать, и разрабатываем универсальное решение, которое можно будет гибко настроить под самые разные задачи.

0
34 комментария
Написать комментарий...
Sambur Alexandr

"Получается, на каждую картинку, загруженную в статью, мы создаём, храним и раздаём 26 файлов."
У меня сайт есть с разными инструкциями, где в каждой статье 15-25 картинок (возмём в среднем 20), если на каждую картинку будет приходится дополнительно ещё 26, и того в статье будет 520 картинок!!!.. кх.. сколько лишнего мусора.. Даже пускай будет формат WebP но на это всё-равно уйдёт много дискового места! Ужас просто! Да и поисковики как к отнесуться к такому количеству однотипных картинок? Можно вполне обойтись 2-3 размерами на картинку и затем с помощью плагина выбирать из этих пару штук под разные размеры дисплея и затем растягивать или сужать по ширине статьи.

Ответить
Развернуть ветку
Game Topia

Так на сайт грузится только необходимая. Pucture -> Source html теги. А место для статики на сервере вообще копейки стоит. К тому же картинки мало весят, ведь они адаптированные.

Ответить
Развернуть ветку
Sambur Alexandr

Картинки хранить на другом сервисе тоже вариант так себе и ссайта в итоге будут вести на сторонний ресурс куча ссылок, я бы так не делал лично.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Yo

Коротко скажите, чем лучше https://editorjs.io/ ?

Ответить
Развернуть ветку
Daria Izotova

Шикарный редактор, один из лучших на рынке + большое комьюнити + возможность максимального простого расширения собственными компонентами при необходимости.

Ответить
Развернуть ветку
Alex

Самое главное это json

Ответить
Развернуть ветку
Norkin Pavel

Кстати, можете в курсе почему у него ctrl+z не работает?

Ответить
Развернуть ветку
ITSumma
Автор

Едитор.жс — хороший редактор. Основных отличия два: встроенный парсер, который можно настроить, чтобы открывать документы из разных источников, и неблочная компоновка: вы можете выделить неполностью предложение в первом абзаце и что-нибудь во втором. Последнее точно нужно не всем, но в эдитор жс такие хитрости не пройдут.

Ответить
Развернуть ветку
Yo

Все это тоже вполне можно сделать и там.

Ответить
Развернуть ветку
ITSumma
Автор

Будем признательны, если расскажете, как именно?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Maxim Kuptsov

Про картинки можно было хранить только оригиналы, а ресайз делать через imgproxy (практически сейчас стандарт в индустрии по работе с картинками). Перед imgproxy поставить любой кэш, к примеру varnish и CDN. В kubernetes такое развернуть не сложно.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
ITSumma
Автор

Есть сравнение, но оно, скорее, "процессное", функциональное, чем техническое — https://blog.editorica.io/post/kakuyu-cms-vybrat-dlya-sayta-media-9e5

Ответить
Развернуть ветку
Michael Nick

В Drupal есть модуль Paragraphs + Ckeditor
Для больших объёмных публикаций маст хев.

Можно в публикации организовывать целые фото галереи

Ответить
Развернуть ветку
Константин Рогов
Нажали Tab, зажали Ctrl + Alt (⌘ + ⌥ ) — получили подсказки для новых блоков.

зажать три кнопки для подсказки? вы там профнепригодны совсем что ли

Ответить
Развернуть ветку
Павел Леонтьев

На таб открывается меню, где мышкой что-то тыкнуть можно. И уже в нем стрл+альт. Две всего

Ответить
Развернуть ветку
Victor Gavro

Тем более что https://github.com/itsumma/textarena#block-elements это полная копипаста https://editorjs.io/base-concepts#what-does-it-mean-block-styled - вежливо было хотя бы указать ссылку на него в ридми. (как и на другие редакторы которые давно отказались от contenteditable - quill, ckeditor5). То есть - ожидаешь хотя бы сравнения, а в ридми подается уход от contenteditable как что-то якобы новое и уникальное, а в чем другая уникальность? может там не один абзац из ридми от editorjs под капотом, а и все остальное?

Ответить
Развернуть ветку
ITSumma
Автор

Едитор.жс — хороший редактор. Основных отличия два: встроенный парсер, который можно настроить, чтобы открывать документы из разных источников, и неблочная компоновка: вы можете выделить неполностью предложение в первом абзаце и что-нибудь во втором. Последнее точно нужно не всем, но в эдитор жс такие хитрости не пройдут.

Ответить
Развернуть ветку
Sam Beckett

То есть вы изобрели текстовый редактор из Notion, так?

Ответить
Развернуть ветку
Konstantin

Крутая работа. Тот, кто работает в новостных порталах - оценят. Может пропустил - вы отдаете в дар?

Ответить
Развернуть ветку
Аналитика на Диване

это опенсорс.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
ITSumma
Автор

Нет, вы не должны выкладывать исходники сайта.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
ITSumma
Автор

Скажем так: нам не хотелось, чтобы кто-то на основе нашего решения создал какой-нибудь свой SaaS. Но если вы встроите Текстарену на свой сайт, никакие исходники выкладывать нет нужды.

Ответить
Развернуть ветку
F-117
Ответить
Развернуть ветку
Norkin Pavel

На телефоне не работает. Не срабатывает энтер, контекстное меню перекрывается системным.
И есть очень хороший тест для любого редактора - embed из инсты

Ответить
Развернуть ветку
Norkin Pavel

Да, инсту вставляет не кодом, а по ссылке и результат плачевный

Ответить
Развернуть ветку
ITSumma
Автор

Мы не рассчитывали, что текстовый редактор для сайта кто-то будет использовать на мобильном. Но учтём!

Ответить
Развернуть ветку
Norkin Pavel

Работать нет, а резко что-то поправить часто бывает надо.

Я в свое время (да и вероятно как многие из комментаторов тут) проходил этот путь, не с нуля конечно, на базе quilljs был у меня редактор. До сих пор где то работают. Но vk.post и инстаграм... Видеть сразу материал это хорошо, но когда эмбед даже в один экран по высоте не убирается - удобство сразу заканчивается.
Ну и галереи, особенно гетерогенные.

Ответить
Развернуть ветку
Аналитика на Диване

что-то достаточно плохо

Ответить
Развернуть ветку
Елена Ковалевская

Похоже на повторное изобретение велосипеда...

Ответить
Развернуть ветку
31 комментарий
Раскрывать всегда