Rich Text

Editors

Rich Text Editors можно встретить практически в любом веб-приложении, но их разработка с нуля является довольно сложной задачей. К счастью, в настоящее время есть множество фреймворков, позволяющих упростить их создание и внедрение. В особенности популярны WYSIWYG (what you see is what you get) редакторы, в которых содержание, отображающееся в процессе редактирования, выглядит максимально похожим на конечный результат. Предлагаем рассмотреть некоторые из популярных фреймворков для создания таких редакторов и / или являющихся готовыми редакторами, вместе с их особенностями.

Quill

Quill data

Quill использует свою схему данных, которая называется "Дельта".

1{
2  "ops": [
3    { "insert": "Gandalf", "attributes": { "bold": true } },
4    { "insert": " the " },
5    { "insert": "Grey", "attributes": { "color": "#cccccc" } }
6  ]
7}

Плюсы:

бесплатный;

поддержка совместного редактирования;

адаптирован под различные браузеры и платформы;

поддержка кастомизации интерфейса;

возможность добавления собственных плагинов.

Минусы:

достаточно тяжеловесный;

дублирование кода при переопределении модулей;

нет встроенной поддержки вложенных структур.

Quill будет отличным выбором для тех, кто не хочет самостоятельно создавать редактор из «строительных блоков», так как он уже является полноценным редактором, готовым к использованию. Также это решение подойдет для небольших статей, которые не подразумевают наличие таблиц или каких-либо других сложных структур.

Draft

Данные в DraftJS

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

1{
2  "blocks": [
3    {
4      "data": {},
5      "depth": 0,
6      "entityRanges": [],
7      "inlineStyleRanges": [],
8      "key": "f911q",
9      "text": "Hello from DraftJS!",
10      "type": "unstyled"
11    },
12    ...
13  ]
14}

Плюсы:

бесплатный;

позволяет создать собственный редактор, включающий в себя наиболее популярные функции.

Минусы:

достаточно тяжеловесный;

нет поддержки совместного редактирования;

плоская структура данных.

Если нужен простой редактор собственного производства, например, для написания статусов, комментариев или небольших статей в приложении на React, то Draft JS будет неплохим выбором.

TinyMCE

Плюсы:

большое количество бесплатных функций;

поддержка вложенных структур (таблицы, вложенные списки и т.д.);

позволяет добавлять собственные плагины;

есть возможность кастомизации интерфейса;

поддерживает совместное редактирование;

следует спецификации WAI-ARIA (для повышения доступности);

адаптирован под различные браузеры и платформы.

Минусы:

структура данных в виде HTML-разметки, что плохо подходит для хранения и обработки на сервере;

очень тяжеловесный;

некоторый функционал является платным.

TinyMCE - достаточно мощный редактор с большим количеством функций и API для их добавления (правда, некоторый функционал является платным), но перед использованием следует внимательно ознакомиться с лицензией. Также придется повозиться с обработкой данных на сервере и хранением документов, если это будет необходимо.

CKEditor 5

Плюсы:

адаптирован под различные браузеры и платформы;

поддержка вложенных структур (таблицы, вложенные списки и т.д.);

поддержка совместной работы;

высокая доступность;

позволяет добавлять собственные плагины;

возможность кастомизации интерфейса.

Минусы:

структура данных в виде HTML-разметки, что плохо подходит для хранения и обработки на сервере;

очень тяжеловесный;

некоторый функционал является платным.

Характеристики те же, что и у TinyMCE. Мощный редактор, подходящий для создания документов любой сложности (таблицы, формулы и многое другое), но есть условия лицензии, про которые не стоит забывать, и сложности с форматом хранения данных.

Prosemirror

Данные в Prosemirror

Prosemirror умеет работать с разными в форматами данных, в том числе html, markdown и объект следующего вида:

1"nodes": {
2    "doc": { content: "block+" },
3    "paragraph": { "group": "block", "content": "text*", "marks": "_" },
4    "heading": { "group": "block", "content": "text*", "marks": "" },
5    "text": { "inline": true }
6}

Плюсы:

бесплатный;

поддержка вложенных структур (таблицы, вложенные списки и т.д.);

поддержка совместной работы;

позволяет добавлять собственные плагины;

возможность кастомизации интерфейса.

Минусы:

требует достаточно много времени для изучения API.

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

Slate

Данные в Slate

Slate использует собственную схему данных, которая выглядит следующим образом:

1"children": [
2  {
3    "type": "paragraph",
4    "children": [
5      {
6        "text": "This text is bold.",
7        "bold": true,
8      },
9    ],
10  },
11  ...
12]

Плюсы:

бесплатный;

легковесность;

поддержка совместной работы;

позволяет добавлять собственные плагины;

возможность кастомизации интерфейса;

не требует много времени для изучения API;

поддержка вложенных структур данных.

Минусы:

не полностью адаптирован под Android.

Данный фреймворк позволяет создавать редакторы разного уровня сложности и при этом имеет достаточно простой в освоении API. Также он хорошо подходит для интеграции с приложениями на React.

Спасибо за внимание!