editorjs html

Editorjs-Html

Утилита для анализа Editorjs Clean Data в HTML.

• Используйте его с простым JavaScript/TypeScript, React, Angular, VUE или любым шаблонным двигателем/структурой по вашему выбору.
• Быстрый, эффективный и легкий.
• Полностью настраивается до сердечника.
• Поддерживает основные блоки EditorJS, которые также настраиваются.
• Расширить, чтобы разобрать свои собственные блоки.

Что нового в V4?

• Полное переписывание, новейшие зависимости с минимальными изменениями API.
• Избыточные функции parseStrict() и validate() удаляются.
• Строгий режим настраивается через параметры.
• Комплексные ошибки, если функции анализатора для блока не являются доступными. Строгий режим бросает ошибки.
• Код более читабелен, модульный. Это облегчит вносить свой вклад и отслеживать изменения.
• Определения типа, непосредственно извлекаемые из editor.js, поэтому развитие становится проще.
• ЕДИНЦИОННЫЕ Тестирование с шутками.

Установка

Самоходеян, предварительно скомпилированные версии.

• Браузер - get /.build/edjshtml.browser.js

• Nodejs - get /.build/edjshtml.node.js

• Как для браузера, так и для узла - get /.build/edjshtml.js

Npm

npm install editorjs-html

CDN

• https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.js
• (Только построение браузера): https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.browser.js

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

Браузер

  const edjsParser = edjsHTML ( ) ;
  let html = edjsParser . parse ( editorjs_clean_data ) ;
  console . log ( html ) ;

Nodejs

  const edjsHTML = require ( "editorjs-html" ) ;
  const edjsParser = edjsHTML ( ) ;
  const html = edjsParser . parse ( editorjs_clean_data ) ;

  console . log ( html ) ; 

Обновления

Смотрите релизы

Док

Поддерживаемые типы блоков

• Заголовок (H1-H6)
• Списки (заказаны и неупорядочен)
• Вложенные списки
• Изображение
• Разделитель
• Абзац
• Цитировать
• Код
• Внедрение

Разобрать весь объект данных Editorjs

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns array of html strings per block
  console . log ( HTML ) ; 

Распокачивать весь объект данных Editorjs (строгий режим)

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns an error
  if ( HTML instanceof Error ) throw HTML ;

  // in case of success, returns an array of strings
  console . log ( HTML ) ; 

Проповедовать один чистый блок данных

  const edjsParser = edjsHTML ( ) ;
  const blockHTML = edjsParser . parseBlock ( editorjs_data_block ) ;
  // returns string of html for this block
  console . log ( blockHTML ) ; 

Строгий режим

  const edjsParser = edjsHTML ( { } , { strict : true } ) ;
  // returns the list of missing parser functions
  const blockHTML = edjsParser . parse ( editorjs_data ) ;
  console . log ( blockHTML ) ;

Расширить для пользовательских блоков

editorjs-html поддерживает расширение и переопределение функций анализатора для блоков.

  // Example Custom or Unrecognised Block
  {
    type : "custom" ,
    data : {
      text : "Hello World"
    }
 } 

  // Parse this block in editorjs-html
  function customParser ( block ) {
    return `<custom-tag> ${ block . data . text } </custom-tag>` ;
  }

  const plugins = {
    // The keyname must match with the type of block you want to parse with this funcion
    custom : customParser
    // ... add more or overwrite
  }

  const edjsParser =  edjsHTML ( plugins ) ; 

Вклад

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

Новые функции анализатора

1. Для дополнительных функций анализатора, пожалуйста, добавьте их в parsers/block-name . Проверьте существующие функции на предложения.
2. Тест каждый работает нормально, с pnpm test && pnpm build .
3. Откройте PR, для обзора.
4. Добавить тесты в каталог tests . Убедитесь, что ваши тесты проходят с соответствующим покрытием.

Предложения и рекомендации

Я хотел бы получить ваши отзывы и любые предложения. Вы также можете сообщить мне, если вам нужна поддержка для дополнительных блоков редактора.

Поддерживать

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

Лицензия

MIT Public License

Автор

@pavittarx