vue3项目引入富文本编辑器

本文介绍了如何在Vue项目中通过WangEditor构建富文本编辑器,包括官网引入、npm安装、页面内嵌入、配置工具、上传功能以及使用v-html显示编辑器内容的过程。

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

一、wangEditor官网地址

https://www.wangeditor.com/

二、安装插件依赖

npm i @wangeditor/editor @wangeditor/editor-for-vue

安装成功后在package-lock.json中可以看到:

三、页面中使用

3.1、template中:

	<el-form-item label="文本内容:" prop="desc">
				<!-- 富文本 -->
		<div style="border: 1px solid #dcdfe6; width: 100%; border-radius: 4px; margin-bottom: 10px">
					<toolbar
						style="border-bottom: 1px solid #dcdfe6; width: 100%; border-radius: 4px"
						:editor="editorRef"
						:default-config="toolbarConfig"
						mode="default"
					/>
					<editor
						v-model="ruleForm.desc"
						style="height: 300px; overflow-y: hidden"
						:default-config="editorConfig"
						mode="default"
						@onCreated="onCreated"
					/>
				</div>
	</el-form-item>

3.2、script标签中引入:

import '@wangeditor/editor/dist/css/style.css'; // css样式
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import {nextTick,shallowRef} from "vue"

3.3、创建编辑器实例同样写在script标签里边

// 富文本实例对象
const editorRef = shallowRef()
// 菜单配置
const toolbarConfig = ref({})
// 编辑器配置
const editorConfig = ref({
  placeholder: '请输入文本内容...',
  readOnly: false,  // 只读
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      server: '#', // 配置图片上传地址
      maxFileSize: 2 * 1024 * 1024, // 10M  图片大小限制
      fieldName: 'multipartFile', // 上传名字
      allowedFileT
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Angus-zoe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值