wangeditor html编辑,Vue整合wangEditor富文本编辑器

最近在做项目时，客户有个发布新闻动态的功能，具体页面内容让客户自己编写，所以要选择富文本编辑器，这样用户体验好一点。网上有很多的富文本编辑器， 因为项目的功能并不是很复杂，所以选择了wangEditor，界面简洁，使用起来也挺方便的；

image.png

实现思路

1.安装wangEditor

2.封装成组件

3.父组件中直接调用

一、wangEditor安装

这里使用npm命令安装；

npm install wangeditor

二、组件封装

2.1、创建组件

这里我们创建一个名为editor.vue的文件，并导入文件；

import E from "wangeditor"

2.2、初始化wangeditor

(1)我们创建一个初始化方法

(2)编写初始化代码

(3)在mounted()中调用

js代码

initE() {

this.editor = new E('#e')

//这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整

this. editor.customConfig.menus = [

'head', // 标题

'bold', // 粗体

'fontSize', // 字号

'fontName', // 字体

'italic', // 斜体

'underline', // 下划线

'strikeThrough', // 删除线

'foreColor', // 文字颜色

'backColor', // 背景颜色

'link', // 插入链接

'list', // 列表

'justify', // 对齐方式

'quote', // 引用

'emoticon', // 表情

'image', // 插入图片

'table', // 表格

'code', // 插入代码

'undo', // 撤销

'redo' // 重复

]

this.editor.create()

},

mounted(){

this.initE()

}

2.3、配置图片上传

this.editor.customConfig.uploadFileName = 'file'

this.editor.customConfig.uploadImgServer = `url` // 你的服务器上传地址

this.editor.customConfig.uploadImgHooks = {

before: function (xhr, editor, files) {<