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

最新推荐文章于 2024-11-21 16:54:45 发布

Cheecho

最新推荐文章于 2024-11-21 16:54:45 发布

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/cheecho/article/details/132432030

本文介绍了如何在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>