Если вы здесь, вероятно, вы уже знали о Editor.js. Но, если вы этого не сделали.

Editor.js — это редактор форматированного текста, который вы можете встраивать в свои приложения. Он обеспечивает чистый, отполированный интерфейс, который выглядит современным и настраиваемым.

Главной преимущество редактора это хранение и представление данных в JSON формате. Особенно поймут те у кого есть и веб-версия продукта и мобильное приложение. Для этого EditorJs рассматривает каждую часть данных как блоки. Блок может быть изображением, абзацем, заголовком и даже вашим персональным блоком редактора.

Все круто, но проблема в том, что EditorJs выводит «JSON» вместо HTML. Теперь JSON хорош, когда вам нужно сохранить его или отправить по сети. Но вы не можете использовать на своем веб-сайте, если не проанализируете его в HTML. К сожалению, на данный момент EditorJs не предоставляет способ отображения этих данных на веб-странице. Однако, с другой стороны, вам остается генерировать HTML таким образом, который лучше всего подходит для вашего проекта. Это звучит лучше всего, но все же оставляет вас с написанием своего парсера.

Есть два варианта: либо написать собственный парсер с нуля, либо использовать какое-нибудь готовое решение. Одно из таких решений — editorjs-html. Он парсит сгенерированный вами editorjs JSON в HTML.

Преимущества использования editorjs-html

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

Поскольку editorjs-html выводит простой HTML, вы можете оформить его так, как хотите.

Использование editorjs-html

В этом примере мы просто будем использовать образцы данных JSON, сгенерированные на основном веб-сайте EditorJS.

Пример данных

Установите editorjs-html

$ npm install editorjs-html

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

Инициализировать парсер

Initializing Library for use

Парсинг данные editorjs в HTML.

Пользовательские функции парсера

editorjs-html также поддерживает пользовательские функции парсера для ваших пользовательских блоков editorjs. Просто определите их и передайте в editorjsHTML (parserFunctions).

Использование демонстрации в браузере

index.html

script.js

Использование демонстрации на Nodejs