vue3富文本编辑器WangEditor_vue3 wangeditor

前言

富文本编辑器WangEditor在Vue3项目中的集成方法

一、WangEditor是什么？

WangEditor为富文本编辑器，简洁易用，功能强大，快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。

二、使用步骤

1.引入库

安装库：
pnpm install @wangeditor/editor-for-vue@next --save
在项目中新建Vue文件命名为WangEditor.vue，将下面代码复制到该文件中

<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"
			@onChange="handleChange"
			@onDestroyed="handleDestroyed"
			@onFocus="handleFocus"
			@onBlur="handleBlur"
			@customAlert="customAlert"
			@customPaste="customPaste"
		/>
	</div>
</template>
<script>
import "@wangedi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24