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

77 阅读 0 评论 51 点赞

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

概述

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#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

里边有个data的值名，他就是你写入的富文本数据，里边有个type属性input，就是个大的input