前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于 Editor.js 开发富文本编辑器库

基于 Editor.js 开发富文本编辑器库

原创
作者头像
用户3347525
发布2023-12-23 23:46:19
5940
发布2023-12-23 23:46:19
举报

开始

Editor.js 提供了简单而直观的用户界面,根据需求可以灵活添加自定义的编辑工具,通过插件扩展功能

Editorjs 使用 js 开发,脱离框架依赖,因此可以基于它封装富文本编辑器,用于 Vue 和 React 项目

editor-js-component 是基于 Editorjs 封装的库,通过 monorepo 管理项目,不局限框架

Demo 示例

editor-js-component

editorjs-js-component 是基于 Editor.js 封装的库,不局限框架,可以用于 Vue 和 React 项目

安装

代码语言:shell
复制
# NPM
npm install --save editor-js-component

# or Yarn
yarn add editor-js-component

# or Pnpm
pnpm add editor-js-component

查看文档,使用

代码语言:js
复制
import { useEditorjs } from 'editor-js-component'

// 执行函数
const editorInstance = useEditorjs({
  ...
})


// 实例化编辑器,开启执行
editorInstance.start()

editorjs-component-vue

editorjs-component-vue 是基于 editor-js-component 封装 Vue3 组件

文档 查看使用

代码语言:shell
复制
# NPM
npm install --save editorjs-component-vue

# or Yarn
yarn add editorjs-component-vue

# or Pnpm
pnpm add editorjs-component-vue

组件注册

代码语言:js
复制
import { 
  EditorJsVue,
  EditorJsParser
} from 'editorjs-component-vue'

// or 全局注册组件

const app = createApp()

app.use(EditorJsVue)

组件使用

代码语言:html
复制
<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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开始
  • editor-js-component
  • editorjs-component-vue
  • 插件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档