wangeditor自定义图片视频上传
完整代码
<template>
<div style="border: 1px solid #ccc;height: 100%;">
<Toolbar
:editor="editorRef"
:default-config="toolbarConfig"
:mode="mode"
style="border-bottom: 1px solid #ccc;"
/>
<Editor
v-model="valueHtml"
:default-config="editorConfig"
:mode="mode"
class="editor_custom"
style="height: 455px; overflow-y: hidden;"
@on-created="handleCreated"
@on-change="handleChange"
@on-destroyed="handleDestroyed"
@on-focus="handleFocus"
@on-blur="handleBlur"
@custom-alert="customAlert"
@custom-paste="customPaste"
/>
</div>
</template>
<script setup>
import {
useUserOutsideStore } from '@/store/modules/user'
import {
ustokenStore } from '@/store/modules/token'
import '@wangeditor/editor/dist/css/style.css'
import {
usUploadStore } from '@/store/modules/upload'
import {
onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import {
Editor, Toolbar } from '@wangeditor/editor-for-vue'
const {
proxy } = getCurrentInstance()
const userOutsideStore = useUserOutsideStore()
const tokenStore = ustokenStore()
const props = defineProps({
modelValue: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:modelValue'])
const editorRef = shallowRef()
const valueHtml = ref(props.modelValue)
watch(() => valueHtml.value, newValue => {
emit('update:modelValue', newValue)
})
watch(() => props.modelValue, newValue => {
valueHtml.value = newValue
})
const disabled = ref(false)
watch(() => props.disabled, newValue => {
disabled.value = newValue
})
onMounted(() => {
AuthorizationHeader()
})
const headerObj = ref({
})
const AuthorizationHeader = () => {
if (tokenStore.token != '') {
if (tokenStore.token != '0') {
headerObj.value.Authorization = tokenStore.token
} else {
headerObj.value.Authorization = userOutsideStore.tokenHead + userOutsideStore.token
}
}
}
const toolbarConfig = {
excludeKeys: ['fullScreen', 'code', 'insertTable', 'group-video'<