editorjs html

editorjs-html

editorjsのクリーンデータをHTMLに解析するためのユーティリティ。

• Plain JavaScript/TypeScript、React、Angular、Vue、または選択したテンプレートエンジン/フレームワークで使用します。
• 高速で効率的で軽量。
• コアに完全にカスタマイズできます。
• 同様にカスタマイズ可能な基本的なEditorJSブロックをサポートします。
• 独自のブロックを解析するために拡張します。

v4で何が新しいのですか？

• 完全な書き換え、最小限のAPI変更を伴う最新の依存関係。
• 冗長なparseStrict()およびvalidate()関数が削除されます。
• Strictモードは、オプションで構成可能です。
• ブロックのパーサー機能が回避できない場合のコンソールエラー。厳密なモードはエラーをスローします。
• コードはより読みやすく、モジュラーです。変更を容易にして追跡することができます。
• 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データオブジェクト全体を解析する（Strict Mode）

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

貢献

問題を追加するか、バグ、レビュー、または提案のためにPRを開いてください。

新しいパーサー関数

1. 追加のパーサー関数については、 parsers/block-nameに追加してください。既存の機能を確認してください。
2. テストEverytingは、 pnpm test && pnpm buildで正常に機能します。
3. レビューのためにPRを開きます。
4. testsディレクトリにテストを追加します。適切なカバレッジでテストが合格していることを確認してください。

提案と推奨事項

私はあなたのフィードバックとどんな提案をしたいです。これ以上のeditorJSブロックのサポートが必要な場合は、お知らせください。

サポート

これが役立つ場合は、このリポジトリを星にすることを検討してください。ここでコーヒーを買うこともできます

ライセンス

MITパブリックライセンス

著者

@pavittarx