wangeditor自定义图片视频上传

最新推荐文章于 2024-06-13 16:50:11 发布

原创

最新推荐文章于 2024-06-13 16:50:11 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

该博客详细介绍了如何在wangEditor编辑器中实现自定义的图片和视频上传功能，包括完整的代码示例，分别针对图片上传和视频上传进行了讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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', 'codeBlock',