wangeditor自定义图片视频上传

最新推荐文章于 2024-03-01 09:26:29 发布

VIP文章 JHTMer

最新推荐文章于 2024-03-01 09:26:29 发布

阅读量1k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/JHTMer/article/details/127241703

版权

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'])

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef()

// const menu = editor.getAllMenuKeys()
// const bar = toolbar.getConfig().toolbarKeys
// 内容 HTML
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
})
// 模拟 ajax 异步获取内容
onMounted(() => {
   
    AuthorizationHeader()
    // setTimeout(() => {
   
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    // }, 1500)
})
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'<