85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<template>
|
||
<div style="position: relative; width: 100%">
|
||
<vue-ueditor-wrap v-model="msg" :config="editorConfig" :editor-id="id" />
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import VueUeditorWrap from 'vue-ueditor-wrap'
|
||
import storage from 'store'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
export default {
|
||
/* eslint-disable */
|
||
name: 'UE',
|
||
components: { 'vue-ueditor-wrap': VueUeditorWrap },
|
||
data() {
|
||
return {
|
||
msg: '',
|
||
id: 'ueditor' + Math.random(),
|
||
editorConfig: {
|
||
lang: 'zh-cn',
|
||
UEDITOR_HOME_URL: '/static/plugins/ueditor/',
|
||
// serverUrl: '//ueditor.szcloudplus.com/cos'
|
||
serverUrl: process.env.VUE_APP_API_BASE_URL + '/sys/ueditor/config',
|
||
headers: {
|
||
Authorization: storage.get(ACCESS_TOKEN)
|
||
}
|
||
},
|
||
}
|
||
},
|
||
props: {
|
||
// 已实现v-model语法糖，调用时数据绑定请直接用v-model
|
||
value: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
config: {
|
||
type: Object,
|
||
default: () => ({
|
||
initialFrameWidth: '100%',
|
||
initialFrameHeight: 300,
|
||
zIndex: 10001,
|
||
}),
|
||
},
|
||
},
|
||
model: {
|
||
event: 'change',
|
||
prop: 'value',
|
||
},
|
||
watch: {
|
||
// config: {
|
||
// immediate: true,
|
||
// handler: function (config) {
|
||
// const defaults = {
|
||
// lang: 'zh-cn',
|
||
// UEDITOR_HOME_URL: '/static/plugins/ueditor/',
|
||
// serverUrl: '/dawa/sys/ueditor/config',
|
||
// }
|
||
// this.editorConfig = { ...defaults, ...config }
|
||
// },
|
||
// },
|
||
msg: function (value) {
|
||
this.$emit('change', value)
|
||
},
|
||
value: {
|
||
immediate: true,
|
||
handler: function (newValue, oldValue) {
|
||
if (newValue == oldValue) return
|
||
this.msg = newValue
|
||
},
|
||
},
|
||
},
|
||
methods: {},
|
||
mounted() {},
|
||
destroyed() {},
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
::v-deep .edui-box {
|
||
line-height: 1;
|
||
}
|
||
|
||
::v-deep .edui-toolbar {
|
||
line-height: 1;
|
||
}
|
||
</style>
|