Рендеринг JSON из Editor.js в HTML

KOD

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.

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

{
   "time":1616613916918,
   "blocks":[
      {
         "type":"header",
         "data":{
            "text":"Три в одном (сначала код): NestJs, GraphQL и&nbsp;Mongoose",
            "level":3
         }
      },
      {
         "type":"paragraph",
         "data":{
            "text":"Я решил написать этот пост в блоге после работы над личным проектом. Когда я начал это, я подумал о том, как создать прочную архитектуру для создания"
         }
      },
      {
         "type":"header",
         "data":{
            "text":"Почему GraphQL?",
            "level":4
         }
      },
      {
         "type":"paragraph",
         "data":{
            "text":"Больше нет избыточной и недостаточной загрузки;Быстрые итерации продукта во внешнем интерфейсе;Информативная аналитика на бэкэнде;Преимущества системы схем и типов;"
         }
      },
      {
         "type":"paragraph",
         "data":{
            "text":"<a href=\"https://www.howtographql.com/basics/1-graphql-is-the-better-rest/\" target=\"_blank\">Как в GraphQL</a>"
         }
      }
   ],
   "version":"2.19.3"
}

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

$ npm install editorjs-html

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

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

// Пример кастомного блока
const block = {
  type: 'custom',
  data: {
    text: "Hello World"
  }
};

// Функция парсера для этого блока. 

function customBlockParser(block){
  return `<span> ${block.data.text} </span>`;
}

// Передайте его на этапе инициализации. 
const edjsParser = edjsHTML({custom: customBlockParser});

/** Note: Примечание: ключ объекта parserOptions
   должен соответствовать типу блока.
*/

// Парсинг блока
console.log(edjsParser.parse({block}));

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

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

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src ="https://cdn.jsdelivr.net/npm/editorjs-html@2.0.0/build/edjsHTML.js"> </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script src="script.js"></script>
</html>

script.js

// sample editorjs generated data 
// the result after JSON.parse() of API request
const editorjsData = {
  time: 1589651463720,
  blocks: [
  {
    type: "paragraph",
    data: {
      text: "some text"
    }
  },
  { 
    type: "paragraph",
    data: {
      text: "more text"
   }
  }, {
    type: "paragraph",
    data: {
      text: "some more text"
    }
  }
]}

// parser function for paragraph block type
const paragraph = (block) => {
  return `<p> ${block.data.text} </p>`;
};

// pass the parser function to the intializer function
const edjsParser = edjsHTML({ paragraph });

// render data to html
const html = edjsParser.parse(editorjsData);
console.log(html);

// select a dom element to parse data into
const container = document.querySelector('#container');
console.log(container);
// push the data into a DOM element
container.innerHTML= html.reduce( (a,c)=> a+c, '' );

Рендеринг JSON из Editor.js в HTML

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

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

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

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

Report Page