0
点赞
收藏
分享

微信扫一扫

Vue3 + TS + Vite 项目引入富文本框

捌柒陆壹 2022-09-11 阅读 145

最近开发新项目中使用到了富文本框,为了找一个简洁好用的富文本还真是不容易,特此给自己记录一下,也分享给大家!希望你需要的时候可以一步到位不用绕弯路。

网上常见的一些 tinymce-vue、quill、UEditor kindEditor ,国外的 CKEditor TinyMCE Quill ProseMirror Draft Slate 等等。我使用的是  ​wangeditor ​​​编辑器。使用简单,界面简洁大气,功能齐全,菜单工具栏可编辑,是一款非常强大的编辑器,所以我选择了它。​

Vue3 + TS + Vite 项目引入富文本框_vue3

一、wangEditor 优势

  1. 官方封装了 Vue React 组件,可以很方便的​​用于 Vue React 等框架​​。支持 vue2 和 vue3 。
  2. wangEditor 有详细的中文文档,以及中文交流环境。因为​​作者open in new window​​就是国内程序员。
  3. 使用 vdom 技术(基于​​snabbdom.jsopen in new window​​ )做视图更新,model 和 view 分离,增加稳定性。
  4. 可以支持 TypeScript。
  5. 官方中文文档:https://www.wangeditor.com/v5/installation.html

 

二、针对 vue3 的安装及使用

安装:

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

使用

<template>
<div style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
</template>

<script>import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
components: { Editor, Toolbar },
setup() {
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})

const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例,重要!
}

return {
editorRef,
valueHtml,
mode: 'default', // 或 'simple'
toolbarConfig,
editorConfig,
handleCreated
};
}
}
</script>

 

三、个性化配置

  • ​​工具栏配置​​ - 插入新菜单,屏蔽某个菜单等
  • ​​编辑器配置​​ - 兼听各个生命周期,自定义粘贴
  • ​​菜单配置​​ - 配置颜色、字体、字号、链接校验、上传图片、视频等

注意:配置项写的时候有 JS 和 TS 两种写法,参考官方文档配置:https://www.wangeditor.com/v5/toolbar-config.html。

  



举报

相关推荐

0 条评论