1 .vue中安装wangEditor
npm 安装 :npm install wangeditor --save
2.创建公用组件
在components中创建awangeditor文件夹,组件内容为
<template>
<div>
<div ref="editor" :style="{width: width + 'px'}" />
</div>
</template>
<script>
import E from 'wangeditor'
import OSS from 'ali-oss'
import config from '@assets/config.json'
export default {
name: 'Editor',
props: {
value: '',
width: {
type: Number,
default: 400
},
},
data () {
return {
client: null
}
},
watch: {
value (val) {
console.log(val)
}
},
mounted () {
this.client = new OSS(config.oss)
this.update()
},
methods: {
fileName (str, type) {
const year = new Date().getFullYear()
var month = new Date().getMonth()
const time = new Date().getTime()
if (month < 9) {
month = '0' + (month + 1)
} else {
month = month + 1
}
const prefix = `/${config.oss.bucket}/${type}` // 文件前缀
// 返回随机数 n是取值几位数
let res = ''
for (
;
res.length < 5;
res += Math.random().toString(36).substr(2).toUpperCase()
) { }
const random = res.substr(0, 5)
const name = `${prefix}/${year}${month}/${time}${random}.${str}`
return name.toLocaleLowerCase()
},
update () {
const editor = new E(this.$refs.editor)
editor.txt.clear()
// editor.config.menus = [
// 'bold', // 粗体
// 'fontSize', // 字号
// 'fontName', // 字体
// 'italic', // 斜体
// 'underline', // 下划线
// 'strikeThrough', // 删除线
// 'foreColor', // 文字颜色
// 'link', // 插入链接
// 'list', // 列表
// 'justify', // 对齐方式
// 'quote', // 引用
// 'image', // 插入图片
// 'location' // 位置
// ]
editor.config.onchange = (text) => {
console.log('input', text)
// editor.txt.clear()
this.$emit('input', text)
}
const that = this
editor.config.uploadImgServer = '图片上传地址'
editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 将图片大小限制为 10M
editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片
editor.config.showLinkImg = false // 隐藏网络图片上传
editor.config.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
// 上传代码返回结果之后,将图片插入到编辑器中
// insert(imgUrl)
// imgsNum: 已存在的图片 uploadImgNum : 上传的图片
// if (this.imgsNum + this.uploadImgsNum > 10) {
// this.$alert('已上传图片超过最大的数量限制!')
// return
// }
console.log('files', files[0])
const file = files[0]
const str = file.name.substring(
file.name.lastIndexOf('.') + 1,
file.name.length
)
const storeAs = that.fileName(str, 'file')
// 上传文件,这里是上传到OSS的 uploads文件夹下
that.client.put(storeAs, file).then((res) => {
if (res.res.statusCode === 200) {
res.imgUrl = config.staticUrl + '/' + res.name
insert(res.imgUrl) // 插入地址
}
})
}
// editor.config.uploadImgHooks = {
// fail: (xhr, editor, result) => {
// debugger
// // 插入图片失败回调
// console.log(result)
// },
// success: (xhr, editor, result) => {
// debugger
// // 图片上传成功回调
// console.log(result)
// },
// timeout: (xhr, editor) => {
// debugger
// // 网络超时的回调
// console.log('网络超时')
// },
// error: (xhr, editor) => {
// debugger
// // 图片上传错误的回调
// console.log('上传错误')
// },
// // 回显
// customInsert: (insertImg, result, editor) => {
// console.log(result)
// const id = result.data.fileId
// const a = result.data.fileName.split('.')[1]
// const str = id + '/' + a
// const url =
// '图片下载地址?fileId=' +
// str
// insertImg(url)
// }
// }
editor.zIndex.baseZIndex = 8; //方法
editor.create()
console.log(this.value)
// editor.txt.html('<p>' + this.value + '</p>')
editor.txt.html(this.value)
}
}
}
</script>
<style scoped>
</style>
3. 在父组件中调用
<template>
<div>
<editor v-model="thanks" @input="input" />
</div>
</template>
import editor from '@/components/awangeditor/index.vue'
components: { editor },
data() {
return {
thanks: '',
}
},
methods: {
change(val) {
console.log(val)
},
input(e) {
console.log(e)
this.thanks = e
}
}