Vue2中使用wangEditor实现自定义上传图片

weixin_48399505

已于 2023-07-13 17:57:55 修改

阅读量2k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-07-13 17:54:35 首次发布

本文链接：https://blog.csdn.net/weixin_48399505/article/details/131708152

版权

本文介绍了如何在Vue2项目中集成@wangeditor的editor-for-vue组件，包括编辑器和工具栏的引入，配置项设置，特别是图片上传功能的实现，通过axios发送POST请求到后台服务器并插入图片到编辑器中。

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

1.安装 @wangeditor/editor-for-vue
2.页面引入

   import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
   import axios from 'axios'

3.页面使用

  <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>
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'

export default {
  components: { Editor, Toolbar },
  data () {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {
        excludeKeys: ['fullScreen']
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 上传图片
          uploadImage: {
            async customUpload (file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: '后台上传文件地址',
                timeout: 1000,
                headers: {
                  'token': '',//接口需要的token
                  'Content-Type': 'application/json'
                }
              })
              instance.post('后台接上传文件口', form
              ).then(res => {
                let data = res.data.data
                console.log(data, 7777)
                //insertFn用于图片显示在编辑器上
                insertFn(
                  `后台文件下载的地址?id=${data.id}`, '', `后台文件下载的地址?id=${data.id}`)
                  })
                .catch(err => console.log(err, 888))
            }
          } }

      },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
  mounted () {
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>
//如果有其他样式，可以把style.css样式复制到assets文件夹下再引用
<style src="@wangeditor/editor/dist/css/style.css"></style>

4.展示效果
在这里插入图片描述