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

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

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

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

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

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

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

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

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

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

Пару слов о том, сколько же нужно изображений. Допустим, ширина колонки на сайте 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.

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

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

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

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

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

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

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

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

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

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

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