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

本文介绍了如何在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" 
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值