vue3富文本编辑器WangEditor

最新推荐文章于 2024-10-10 20:03:25 发布

音吹斯汀

最新推荐文章于 2024-10-10 20:03:25 发布

阅读量1.1k

点赞数 9

分类专栏：前端vue 文章标签： vue.js 前端框架 vue 编辑器

本文链接：https://blog.csdn.net/weixin_44353358/article/details/135411990

版权

本文介绍了如何在Vue3项目中集成WangEditor，详细阐述了安装库和读入数据的步骤，提供了一种快速接入富文本编辑器的方法。

摘要由CSDN通过智能技术生成

前言

富文本编辑器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 "@wangedit