<template>
|
<div class="wang_editor">
|
<Toolbar
|
style="border-bottom: 1px solid #ccc"
|
:editor="editor"
|
:default-config="toolbarConfig"
|
:mode="mode"
|
/>
|
<Editor
|
v-model="html"
|
style="min-height: 200px"
|
:default-config="editorConfig"
|
:mode="mode"
|
@onCreated="onCreated"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
import '@wangeditor/editor/dist/css/style.css'
|
import axios from 'axios'
|
|
import { uploadFile } from '@/api'
|
|
const uploadConfig = {
|
action: uploadFile, // 必填参数 图片上传地址
|
methods: 'POST', // 必填参数 图片上传方式
|
token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
|
name: 'file', // 必填参数 文件的参数名
|
size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb
|
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
|
}
|
export default {
|
components: {
|
Editor,
|
Toolbar
|
},
|
props: {
|
info: {
|
type: String,
|
default: ''
|
},
|
default: {
|
type: String,
|
default: ''
|
},
|
placeholder: {
|
type: String,
|
default: '请输入内容...'
|
}
|
},
|
data () {
|
return {
|
editor: null,
|
toolbarConfig: {},
|
editorConfig: {
|
placeholder: this.placeholder,
|
MENU_CONF: {
|
uploadImage: {
|
html: this.info,
|
server: uploadFile,
|
// 单个文件的最大体积限制，默认为 2M
|
maxFileSize: 5 * 1024 * 1024, // 1M
|
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
|
allowedFileTypes: ['image/*'],
|
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端
|
meta: {
|
token: '',
|
otherKey: '',
|
folder: 'COURSE_IMG'
|
},
|
// 自定义增加 http header
|
headers: {
|
token: localStorage.getItem('token') || ''
|
// Accept: 'text/x-json',
|
// otherKey: 'xxx'
|
},
|
// 跨域是否传递 cookie ，默认为 false
|
withCredentials: true,
|
// 超时时间，默认为 10 秒
|
timeout: 5 * 1000, // 5 秒
|
onSuccess (file, res) { // TS 语法
|
// onSuccess(file, res) { // JS 语法
|
console.log(`${file.name} 上传成功`, res)
|
},
|
customUpload (file, insertFn) { // TS 语法
|
// file 即选中的文件
|
// 自己实现上传，并得到图片 url alt href
|
// var form = new FormData()
|
// form.append('image', file)
|
// form.append('folder', 'COURSE_IMG')
|
var formData = new FormData()
|
formData.append(file.name, file)
|
formData.append('image', file)
|
formData.append('folder', 'member')
|
// formData.append('type', '')
|
|
var xhr = new XMLHttpRequest()
|
xhr.open(uploadConfig.methods, uploadConfig.action, true)
|
// 上传数据成功，会触发
|
xhr.send(formData)
|
xhr.onreadystatechange = () => {
|
// 若响应完成且请求成功
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
const result = JSON.parse(xhr.responseText)
|
console.log('result', result);
|
insertFn(result.data.url, '', result.data.url)
|
}
|
}
|
},
|
customInsert (res, insertFn) { // TS 语法
|
// customInsert(res, insertFn) { // JS 语法
|
// res 即服务端的返回结果
|
console.log(res.data.url)
|
// 从 res 中找到 url alt href ，然后插入图片
|
insertFn(res.url)
|
}
|
}
|
}
|
},
|
mode: 'default' // or 'simple'
|
}
|
},
|
emits: ['input'],
|
computed: {
|
html: {
|
get () {
|
return this.info || ''
|
},
|
set (newValue) {
|
this.$emit('input', newValue)
|
}
|
}
|
},
|
mounted () {
|
setTimeout(() => {
|
this.info = this.default
|
}, 1200)
|
},
|
beforeDestroy () {
|
const editor = this.editor
|
if (editor == null) return
|
editor.destroy() // 组件销毁时，及时销毁编辑器
|
},
|
methods: {
|
onCreated (editor) {
|
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
|
this.$emit('input', '123123')
|
},
|
test () {
|
console.log(this.info)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.wang_editor {
|
border: 1px solid;
|
}
|
</style>
|
