开始
Editor.js 提供了简单而直观的用户界面,根据需求可以灵活添加自定义的编辑工具,通过插件扩展功能
Editorjs
使用 js 开发,脱离框架依赖,因此可以基于它封装富文本编辑器,用于 Vue 和 React 项目
editor-js-component 是基于 Editorjs 封装的库,通过 monorepo 管理项目,不局限框架
editor-js-component
editorjs-js-component 是基于 Editor.js 封装的库,不局限框架,可以用于 Vue 和 React 项目
安装
# 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'
// 执行函数
const editorInstance = useEditorjs({
...
})
// 实例化编辑器,开启执行
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
组件注册
import {
EditorJsVue,
EditorJsParser
} from 'editorjs-component-vue'
// or 全局注册组件
const app = createApp()
app.use(EditorJsVue)
组件使用
<EditorJsVue
class="editor-left"
ref="editor"
:data="data"
:messages="i18nMessage"
:initialized="onInitialized"
:tool-config="toolConfig"
@changeData="editorChange"
/>
插件
Editorjs 以模块化的方式开发,通过插件方式扩展功能,如标题、段落、列表、表格等
根据 Editorjs 提供的 API 开发富文本插件功能
插件列表,可以开发满足于自己的插件
- header
- list
- code
- inlineCode
- personality
- embed
- linkTool
- marker
- table
- raw
- delimiter
- quote
- image
- warning
- paragraph
- checklist
如果对富文本编辑器感兴趣,欢迎加入
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。