如何在vue项目中实现一个简单的富文本编辑器

最新推荐文章于 2024-08-06 15:16:55 发布

茶馆后院的猫

最新推荐文章于 2024-08-06 15:16:55 发布

阅读量2.1k

点赞数

分类专栏： vue小工具文章标签： vue

本文链接：https://blog.csdn.net/weixin_52734828/article/details/112767753

版权

本文介绍了在Vue项目中实现一个简单富文本编辑器的步骤，包括安装编辑器组件、引入并设置编辑器容器、在mounted生命周期钩子中初始化编辑器，并展示了如何通过监听input事件获取富文本数据。

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

Vue使用简单的富文本编辑器

富文本编辑器我理解的就是比input更高级的input框

首先你需要先安装

npm i wangeditor --save

然后组件引入

import inp from "wangeditor"

创建div设置id=“div1”，给宽高

然后mounted内写入

		const editor = new inp('#div1')
		editor.create()

然后你就会得到一个简单的富文本编辑器

你可以写入，文本，链接，等…，好既然说它是input框那怎么取值，取值是非常简单的,你给创建的div绑定一个@input事件或者键盘事件都行，这里我用的input事件,然后我console.log打印是event

add(event) {
  console.log(event);
  console.log(event.data);
},

//这是打印的数据，
bubbles: true
cancelBubble: false
cancelable: false
composed: true
currentTarget: null
data: "a"
dataTransfer: null
defaultPrevented: false
detail: 0
eventPhase: 0
inputType: "insertText"
isComposing: false
isTrusted: true
path: (8) [div#