如何在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

最后

以上就是复杂纸鹤最近收集整理的关于如何在vue项目中实现一个简单的富文本编辑器的全部内容，更多相关如何在vue项目中实现一个简单内容请搜索靠谱客的其他文章。