wangEditor实现自定义上传图片/视频【customUpload方法配置】

本文介绍了如何在Vue项目中使用WangEditor构建富文本编辑器,并自定义图片和视频上传功能,包括设置http头和异步上传处理。

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

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from '@/request/request.js'

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {},
      },
      mode: 'default', // or 'simple'
    }
  },
  props: {
    content: {
      type: String,
      default: '',
    },
  },
  created() {
    const uploadConfig = {
      // 自定义增加 http  header
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      // 自定义图片上传
      async customUpload(file, insertFn) {
        // file 即选中的文件
        const fd = new FormData()
        fd.append('file', file)
        axios
          .post('/api/upload', fd)
          .then((response) => {
            const url = process.env.VUE_APP_BASE_IMG + response
            // 插入图片
            insertFn(url)
          })
          .catch(() => {})
      },
    }
    // 图片配置设置
    this.editorConfig.MENU_CONF['uploadImage'] = uploadConfig
    // 视频配置设置
    this.editorConfig.MENU_CONF['uploadVideo'] = uploadConfig
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
      this.html = this.content  // 回显数据需要在editor构建之后
    },
    getContent() {
      return this.html
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时,及时销毁编辑器
  },
})
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
### WangEditor 富文本编辑器自定义上传视频实现 为了实现Vue 项目中通过 WangEditor 进行自定义视频上传,需按照如下方式设置: #### 安装依赖包 首先确保已经安装了 `@wangeditor/editor` 和 `@wangeditor/editor-for-vue` 插件[^2]。 ```bash yarn add @wangeditor/editor yarn add @wangeditor/editor-for-vue@next ``` 或者使用 npm: ```bash npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue@next --save ``` #### 配置 Editor 组件支持视频上传 创建或修改已有组件文件,在其中引入必要的模块并初始化 editor 实例时指定 video 的 uploadConfig 属性来定制化上传行为。下面是一个完整的例子说明如何完成这项工作。 ```vue <template> <div id="editor-container"></div> </template> <script setup lang="ts"> import { onMounted, ref } from 'vue'; import { createEditor, IEditorConfig } from '@wangeditor/editor'; // 创建一个用于存储实例的对象 let editorInstance; const config: Partial<IEditorConfig> = { placeholder: '请输入内容...', }; onMounted(() => { const editorContainer = document.getElementById('editor-container'); // 初始化编辑器配置项 Object.assign(config, { MENU_CONF: { insertVideo: { async customUpload(param) { try { let formData = new FormData(); formData.append("file", param.file); // 使用 Axios 发送请求至服务器端处理程序 const response = await axios.post('/api/upload-video', formData); // 假设返回的数据结构为 {"url": "http://example.com/video.mp4"} if (response.data && typeof response.data === 'object') { param.success(response.data.url); // 成功回调 } } catch(error){ console.error('Failed to upload:', error.message || error); param.fail(); // 失败回调 } }, }, }, }); // 初始化编辑器实例 editorInstance = createEditor({ selector: '#editor-container', config, mode: 'default' }); }); </script> <style scoped> /* 添加样式 */ #editor-container { width: 80%; margin-left: auto; margin-right: auto; } </style> ``` 此代码片段展示了如何利用 TypeScript 编写 Vue 单文件组件,并且设置了特定于插入视频菜单项 (`insertVideo`) 的上传逻辑。这里假设有一个 `/api/upload-video` 接口可以接收 POST 请求并将接收到的文件保存到适当位置后返回其访问 URL。 当用户尝试向文档内嵌入视频链接时会触发上述定义好的异步函数来进行实际操作;成功之后调用参数对象中的 success 方法告知插件新资源的位置以便渲染出来给最终使用者观看。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值