wang-editor.vue
<template>
<div>
<div :id="params.id">
</div>
<Audio v-if="audioShow" @uploadAudio="uploadAudio"/>
</div>
</template>
<script>
import E from 'wangeditor'
import Audio from './audio.vue'
export default {
name: 'wangEditor',
components: {
Audio
},
props: {
id: {
type: String,
default: () => ''
},
content: {
type: String,
default: () => ''
},
},
watch: {
id (newVal) {
this.params.id = newVal
}
},
data() {
return {
localEditor: null,
audioShow: false,
params: {
id: 'wang-editor', //富文本框ID
menus: [
'bold',
'head',
'link',
'italic',
'underline'
],
customImgUpload: {
flag: true, //是否自定义方法上传图片
methods: {
customUploadImg: (resultFiles, insertImgFn) => {
console.log(resultFiles, insertImgFn, '插入图片')
this.uploadFile('img', resultFiles, insertImgFn)
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
// 上传图片,返回结果,将图片插入到编辑器中
}
}
},
customVideoUpload: {
flag: true, //是否自定义方法上传视频
methods: {
customUploadVideo: (resultFiles, insertVideoFn) => {
console.log(resultFiles, insertVideoFn, '插入视频')
this.uploadFile('video', resultFiles, insertVideoFn)
// resultFiles 是 input 中选中的文件列表
// insertVideoFn 是获取视频 url 后,插入到编辑器的方法
// 上传视频,返回结果,将视频地址插入到编辑器中
// insertVideoFn('https://touxianglogo.com/img/3.36eb1cce.jpg')
}
}
},
params: {
focus: false, //自动focus
placeholder: '请输入正文...', //placeholder内容提示
showMenuTooltips: true, //菜单栏提示
menuTooltipPosition: 'down',
excludeMenus: [
//自定义程度比较