效果图:
1、安装 按照顺序执行
1、yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save
2、yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save
2、在对应使用页面加入
a、html:
<template>
<div class="content-box">
<!-- 引入富文本编辑器 start -->
<template>
<div style="border: 1px solid #ccc;margin: 20px 20px 20px 30px;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
:defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 500px; overflow-y: hidden;" v-model="html"
:defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
</div>
</template>
<!-- 引入富文本编辑器 end -->
</div>
</template>
b、js:
在<script>内引入组件和需要用的文件:
<script>
import axios from 'axios'
import Vue from 'vue'
import {
Editor,
Toolbar
} from '@wangeditor/editor-for-vue'
</script>
注册组件在export default {}中:
export default {
//注册组件
components: {
Editor,
Toolbar
},
}
在data() {}中定义需要用到的参数和配置上传图片视频相关信息
data() {
// 富文本编辑器 -- start
editor: null, // 编辑
html: '', // 最后传给后端的富文本字符串
toolbarConfig: {}, //工具栏配置
editorConfig: { // 编辑器配置
placeholder: '请输入内容...',
// 所有的菜单配置,都要在 MENU_CONF 属性下
MENU_CONF: {
// 配置上传图片
uploadImage: {
customUpload: this.updateImg, // 封装的上传图片和视频方法
},
// 配置上传是视频
uploadVideo: {
customUpload: this.updateImg,
}
}
},
mode: 'default', // or 'simple' or 'default'
// 富文本编辑器 -- end
},
在methods写入公共封装的上传图片和视频的方法
methods: {
// 上传图片和视频封装
updateImg(file, insertFn) {
let _this = this
// 上传图片接口
// FormData 对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据 (keyed data),而独立于表单使用。如果表单enctype属性设为 multipart/form-data,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。
let params = new FormData()
params.append('file', file) // file 即选中的文件
// 发送上传图片请求 _this.uploadsImg 上传服务器接口路径 params上传参数
axios.post(_this.uploadsImg +'goods',params,{
headers: { // 请求头
token: getToken(), // 上传token
"Content-type": 'application/x-www-form-urlencoded'
}
}).then(res => {
//成功提示
_this.$message({
type: 'success',
message: '上传成功!'
});
// 最后插入图片到富文本编辑器中 放入的是可访问的全路径
insertFn(res.data.data); // 这里的res.data.data 是上传到服务器返回的可访问的全路径,有特殊需要需特殊封装
});
},
},
在加一个周期函数
// 在页面 销毁前
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
}
c、css:
一定要引入编辑器的样式
<!-- 引入富文本编辑器css -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
我是用的WangEditor实现的,如果想用其他的也可以访问:11款vue富文本编辑器推荐 - 极客库
最后全部我做的就是这样子了,基本效果是可以完成的,至于有特殊配置或者需求的,可以访问