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

106 阅读 0 评论 70 点赞

我是靠谱客的博主复杂纸鹤，这篇文章主要介绍如何在vue项目中实现一个简单的富文本编辑器，现在分享给大家，希望可以做个参考。

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

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

首先你需要先安装

npm i wangeditor --save

然后组件引入

import inp from "wangeditor"

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

然后mounted内写入

复制代码

1
2
3
4

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

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

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

复制代码

1
2
3
4
5
add(event) {
console.log(event);
console.log(event.data);
},

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//这是打印的数据，
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#text-elem9268947434318948.w-e-text, div.w-e-text-container, div#div1, div, body, html, document, Window]
returnValue: true
sourceCapabilities: null
srcElement: div#text-elem9268947434318948.w-e-text
target: div#text-elem9268947434318948.w-e-text
timeStamp: 6226.339999999254
type: "input"
view: null
which: 0
__proto__: InputEvent