開始

Editor.js 提供了簡單而直觀的用戶界面，根據(jù)需求可以靈活添加自定義的編輯工具，通過插件擴(kuò)展功能

Editorjs 使用 js 開發(fā)，脫離框架依賴，因此可以基于它封裝富文本編輯器，用于 Vue 和 React 項(xiàng)目

editor-js-component 是基于 Editorjs 封裝的庫，通過 monorepo 管理項(xiàng)目，不局限框架

Demo 示例

image.png

editor-js-component

editorjs-js-component 是基于 Editor.js 封裝的庫，不局限框架，可以用于 Vue 和 React 項(xiàng)目

安裝

# NPM
npm install --save editor-js-component

# or Yarn
yarn add editor-js-component

# or Pnpm
pnpm add editor-js-component

查看文檔，使用

import { useEditorjs } from 'editor-js-component'

// 執(zhí)行函數(shù)
const editorInstance = useEditorjs({
  ...
})


// 實(shí)例化編輯器，開啟執(zhí)行
editorInstance.start()

editorjs-component-vue

editorjs-component-vue 是基于 editor-js-component 封裝 Vue3 組件

文檔 查看使用

# NPM
npm install --save editorjs-component-vue

# or Yarn
yarn add editorjs-component-vue

# or Pnpm
pnpm add editorjs-component-vue

組件注冊(cè)

import { 
  EditorJsVue,
  EditorJsParser
} from 'editorjs-component-vue'

// or 全局注冊(cè)組件

const app = createApp()

app.use(EditorJsVue)

組件使用

<EditorJsVue
    class="editor-left"
    ref="editor"
    :data="data"
    :messages="i18nMessage"
    :initialized="onInitialized"
    :tool-config="toolConfig"
    @changeData="editorChange"
  />

插件

Editorjs 以模塊化的方式開發(fā)，通過插件方式擴(kuò)展功能，如標(biāo)題、段落、列表、表格等

根據(jù) Editorjs 提供的 API 開發(fā)富文本插件功能

插件列表，可以開發(fā)滿足于自己的插件

• header
• list
• code
• inlineCode
• personality
• embed
• linkTool
• marker
• table
• raw
• delimiter
• quote
• image
• warning
• paragraph
• checklist

如果對(duì)富文本編輯器感興趣，歡迎加入