editorjs html

Editorjs-html

用來解析Editorjs將數據清潔到HTML的實用程序。

• 將其與普通的JavaScript/Tyspript，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 ) ; 

貢獻

請添加問題，或為任何錯誤，審查或建議打開PR。

新解析器功能

1. 有關其他解析器功能，請將它們添加到parsers/block-name中。檢查現有功能以獲取建議。
2. 通過pnpm test && pnpm build ，每個測試都可以正常工作。
3. 打開PR，供審核。
4. 在tests目錄中添加測試。確保您的測試通過適當的覆蓋範圍。

建議和建議

我很想有您的反饋和任何建議。您還可以讓我知道，如果您需要更多的Editorjs塊。

支持

如果您覺得這有用，請考慮將此存儲庫成為一顆星。你也可以在這裡給我買咖啡

執照

麻省理工學院公共許可證

作者

@pavittarx