Vue3中使用的富文本编辑器（详细实现流程）

贫僧法号依平

已于 2024-04-22 08:50:20 修改

阅读量1.1w

点赞数 25

文章标签： javascript 前端 vue.js typescript

于 2024-04-09 11:48:07 首次发布

本文链接：https://blog.csdn.net/m0_70705683/article/details/137545426

版权

本文介绍了如何在Vue3项目中集成和使用wangEditor富文本编辑器，包括项目初始化、下载依赖、配置使用、自定义功能（如图片和视频上传）以及注意事项，包括组件销毁时的正确操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 前言

有不少的前端需求都需要使用到富文本编辑器,但是富文本编辑器百花齐放,每次使用可能都会重新找一个编辑器,所以有了这篇文章. 当项目中需要使用到富文本编辑器时,可以直接按照这篇文章的步骤进行,不出意外的话应该可以满足你的绝大多数需求

2. 项目初始化

以下实例为Vue3项目,可直接集成到你的项目中,所以这里的项目初始化就不做详细步骤指引,需要Vue3项目搭建步骤的可以看我前几篇文章,里面都有

3. 下载

富文本编辑器依赖

// 这里使用的是wangEditor富文本编辑器
npm install @wangeditor/editor @wangeditor/editor-for-vue
// 或
yarn add @wangeditor/editor @wangeditor/editor-for-vue

4. 使用富文本编辑器

<!--
 * @Author: wangzhiyu <w19165802736@163.com>
 * @version: 1.0.0
 * @Date: 2024-04-7 11:04:25
 * @LastEditTime: 2024-04-08 21:44:20
 * @Descripttion: 富文本编辑器组件
-->
<template>
  <div style="border: 1px solid #ccc; width: 50%; margin: 100px auto">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef"