Editors

8 800 550 0989

Напишите нам

HWDTECH BLOG

Rich Text Editors

Обзор популярных фреймворков для создания Rich Text Editors

17-02-2021

rich text editor

Время чтения: 5 минут

Обсудить или задать вопрос

Rich Text Editors можно встретить практически в любом веб-приложении, но их разработка с нуля является довольно сложной задачей. К счастью, в настоящее время есть множество фреймворков, позволяющих упростить их создание и внедрение.

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

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

Quill

Он является готовым WYSYWYG редактором, который предоставляется под лицензией BSD. Разработан и поддерживается компанией Slab.

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

Данный редактор можно увидеть в таких продуктах, как Grammarly или Telegra.ph

Пример редактора, созданного с помощью Quill

Данные в Quill

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

{
  "ops": [
    { "insert": "Gandalf", "attributes": { "bold": true } },
    { "insert": " the " },
    { "insert": "Grey", "attributes": { "color": "#cccccc" } }
  ]
}

Плюсы:

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

Минусы:

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

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

Draft

Пример редактора, созданного с помощью фреймворка Draft

Это фреймворк для создания редакторов от компании Facebook, распространяющийся под лицензией MIT.

Данный фреймворк предназначен исключительно для React и активно используется самой компанией для статусов, комментариев и продукта www.messenger.com.

Данные в DraftJS

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

{
  "blocks": [
    {
      "data": {},
      "depth": 0,
      "entityRanges": [],
      "inlineStyleRanges": [],
      "key": "f911q",
      "text": "Hello from DraftJS!",
      "type": "unstyled"
    },
    ...
  ]
}

Плюсы:

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

Минусы:

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

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

TinyMCE

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

Распространяется под лицензией LGPL.

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

Данный редактор используется в продуктах Blackboard, Fortinet и не только.

Пример редактора, созданного с помощью TinyMCE

Плюсы:

большое количество бесплатных функций;
поддержка вложенных структур (таблицы, вложенные списки и т.д.);
позволяет добавлять собственные плагины;
есть возможность кастомизации интерфейса;
поддерживает совместное редактирование;
следует спецификации WAI-ARIA (для повышения доступности);
адаптирован под различные браузеры и платформы.

Минусы:

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

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

CKEditor 5

Пример редактора, созданного с помощью CKEditor

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

Распространяется под лицензией GPL.

Также как и TinyMCE, предоставляет огромное количество функционала, подходящего для создания как простых, так и сложных документов.

Плюсы:

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

Минусы:

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

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

Prosemirror

Представляет собой инструмент для создания текстовых редакторов WYSIWYM (what you see is what you mean) с открытым исходным кодом, распространяющийся под лицензией MIT.

Редакторами на основе Prosemirror пользуются The New York Times, The Guardian и многие другие.

Пример редактора, созданного с помощью Prosemirror

Данные в Prosemirror

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

"nodes": {
    "doc": { content: "block+" },
    "paragraph": { "group": "block", "content": "text*", "marks": "_" },
    "heading": { "group": "block", "content": "text*", "marks": "" },
    "text": { "inline": true }
}

Плюсы:

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

Минусы:

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

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

Slate

Пример редактора, созданного с помощью Slate

Бесплатный, полностью кастомизируемый фреймворк для создания редакторов форматированного текста. Slate позволяет создавать многофункциональные, интуитивно понятные редакторы, подобные редакторам в Medium, Dropbox Paper или Google Docs. Распространяется под лицензией MIT.

Slate можно встретить в таких продуктах, как Slite, NetlifyCMS и многих других.

Данные в Slate

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

"children": [
  {
    "type": "paragraph",
    "children": [
      {
        "text": "This text is bold.",
        "bold": true,
      },
    ],
  },
  ...
]

Плюсы:

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

Минусы:

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

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

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

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

Подпишитесь на обновления.