editorjs html

editorjs-html

Ein Dienstprogramm zur Analyse von EditorJs Clean -Daten an HTML.

• Verwenden Sie es mit einfachem JavaScript/TypeScript, React, Winkel, VUE oder einer Templating -Engine/-gerüst Ihrer Wahl.
• Schnell, effizient und leicht.
• Vollständig anpassbar auf den Kern.
• Unterstützt auch grundlegende EditorJS -Blöcke, die ebenfalls anpassbar sind.
• Erweitern Sie, um Ihre eigenen Blöcke zu analysieren.

Was ist neu in V4?

• Vollständige Umschreiben, neueste Abhängigkeiten mit minimalen API -Änderungen.
• Redundante parseStrict() und validate() -Funktionen werden entfernt.
• Der strenge Modus ist über Optionen konfigurierbar.
• Konsolenfehler Wenn Parser -Funktionen für Block nicht blockiert sind. Der strenge Modus wirft Fehler aus.
• Code ist lesbarer, modular. Es würde es einfacher machen, Änderungen beizutragen und zu verfolgen.
• Typ -Definitionen, die direkt aus editor.js abgerufen werden, so wird die Entwicklung einfacher.
• Unit -Tests mit Scherz.

Installation

Selbstwirt, vorkompilierte Versionen.

• Browser - get /.build/edjshtml.browser.js

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

• Für Browser & Node - get /.build/edjshtml.js

NPM

npm install editorjs-html

CDN

• https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.js
• (Nur Browser Build): https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.browser.js

Verwendung

Browser

  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 ) ; 

Aktualisierungen

Siehe Veröffentlichungen

Dokumente

Unterstützte Blocktypen

• Header (H1-H6)
• Listen (bestellt und ungeordnet)
• Verschachtelte Listen
• Bild
• Abgrenzer
• Absatz
• Zitat
• Code
• Einbetten

Analysieren Sie das Datenobjekt des Editorjs

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

Das gesamte EditorJS -Datenobjekt analysieren (strenger Modus)

  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 ) ; 

Einen sauberen Datenblock analysieren

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

Strenger Modus

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

Für benutzerdefinierte Blöcke verlängern

editorjs-html unterstützt die Erweiterung und Überschreibung von Parser-Funktionen für Blöcke.

  // 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 ) ; 

Beitrag

Bitte fügen Sie ein Problem hinzu oder öffnen Sie eine PR für Fehler, Überprüfungen oder Vorschläge.

Neue Parser -Funktionen

1. Für weitere Parserfunktionen fügen Sie sie bitte zu parsers/block-name hinzu. Überprüfen Sie die vorhandenen Funktionen auf Vorschläge.
2. Test alles funktioniert gut, mit pnpm test && pnpm build .
3. Öffnen Sie eine PR zur Überprüfung.
4. Fügen Sie Tests im tests hinzu. Stellen Sie sicher, dass Ihre Tests mit entsprechender Deckung bestehen.

Vorschläge und Empfehlungen

Ich würde gerne Ihr Feedback und alle Vorschläge haben. Sie können es mich auch wissen lassen, wenn Sie Unterstützung für weitere EditorJS -Blöcke benötigen.

Unterstützung

Wenn Sie dies hilfreich finden, sollten Sie diesem Repository einen Stern geben. Sie können mir hier auch einen Kaffee kaufen

Lizenz

MIT Public Lizenz

Autor

@pavittarx