Оглавление

1. Введение

1.1. Почему понадобился WYSIWYG

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

• в TinyMCE нельзя загружать картинки напрямую из файла, можно только прикреплять ссылки на изображения, а из-за того, что пользователи не имели возможности загружать картинки в наше хранилище, то если ссылки на них умирали, мы ничего не могли с этим сделать;
• возможности для редактирования и форматирования текста не сбалансированы. С одной стороны, не хватало каких-то стилей, например, для внутренних заголовков в тексте. С другой – использовать имеющиеся инструменты можно было в каких угодно сочетаниях. В результате посты выглядели неединообразно (в Sports.ru началась работа по внедрению дизайн-системы и пользовательские посты должны выглядеть в соответствии с ней);
• контент создается и хранится в HTML, поэтому сложно управлять стилями в постах на разных клиентах, да и просто вносить изменения в верстку постов.

1.2. Описание задачи, которая стояла перед разработчиками

• сама концепция WYSIWYG, т.е. what you see is what you get (англ. «что видишь, то и получишь», подробнее можно посмотреть в Википедии), когда пользователи в процессе создания поста буквально видят его точно таким, каким он будет после публикации. И не только самого поста, а также его превью в ленте;
• вставка эмбедов (эмбедом мы называем мультимедийный элемент или виджет, не зависимый от остального контента на странице, с которым можно взаимодействовать так же, как на ресурсе, где он был создан; например, эмбед поста в инстаграме позволяет пролистать карусель фотографий или поставить лайк) постов из соцсетей и видеохостингов.

const structuredBody = [
    {
        type: 'subtitle',
        value: {
            text: 'Мой новый заголовок второго уровня',
            level: 2,
        },
    },
];

2. Как выбирали инструмент

3. Что получилось

3.1. Архитектура сервиса

1. web-страница для создания и редактирования поста;
2. Vue-app, которое запускается на клиенте. По сути, это форма, написанная на Vue, помимо самого контента поста она сабмитит еще множество мета-данных, например, название, аннотацию, привязку к разделу и подразделам и т.д., а также валидирует данные, выводит различные сообщения для пользователя и делает прочие вещи, которые делают все уважающие себя формы;
3. WYSIWYG-редактор на основе ProseMirror, который инициализируется внутри формы на Vue. Это и есть наш редактор текста, работающий примерно так, как описано в статье;
4. SB2HTML – сервис для рендера HTML из structured body, живущий на отдельном сервере. Как мы уже упоминали, structured body – это наше внутреннее соглашение о формате данных, в котором хранится контент. Необходимость такого сервиса родилась из идеи, что между сервером, имеющим доступ к базе данных, и клиентом нужно передавать только данные. Но пока для Sports.ru клиенты не умеют генерировать HTML из structured body, придется по-прежнему хранить в базе актуальный HTML для отображения. Именно для этого мы реализовали генерацию HTML на сервере на Node.Js, чтобы в будущем можно было переиспользовать этот JS-код для отображения постов.
   

3.2. С какими сложностями столкнулись

4. Результаты бета-тестирования

• интерфейс редактора стал понятным, лаконичным и современным, писать длинные посты стало намного проще;
• появилась возможность загрузки изображений из файла и по ссылке, которые сразу размещаются в нашем хранилище;
• добавили опцию вставки эмбедов из основных соцсетей и видеохостингов;
• навели порядок со стилями форматирования текста;
• мобильные приложения уже перешли на отображение постов из structured body и могут задавать собственные стили для контента.

• автосохранение;
• версия WYSIWYG для пользователей с расширенными правами (администраторы, штатные редакторы);
• создание и редактирование постов из мобильных браузеров;
• сообщения о параллельном редактировании документа несколькими пользователями;
• подсказки и онбординг;
• статистические виджеты спортивных команд, матчей и расстановок.