Vue Quill Editor 插入图片路径太长问题的解决办法

2024-02-22 10:10:27

导入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

配置

<vue-quill-editor
    :options="{
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'script': 'sub'}, { 'script': 'super' }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'align': [] }],
                ['blockquote', 'code-block'],
                ['clean'],
                ['image']
            ]
        }
    }"
    v-model="value"
>
</vue-quill-editor>

技术指南

安装依赖
```
npm install --save vue-quill-editor
```

在 Vue 中注册组件

Vue.component('vue-quill-editor', VueQuillEditor)

在 Vue 模板中使用组件

<vue-quill-editor v-model="content"></vue-quill-editor>

自定义上传图片的路径

VueQuillEditor.install(Vue, {
  modules: {
    imageUploader: {
      upload(file) {
        return new Promise((resolve, reject) => {
          const formData = new FormData()
          formData.append('image', file)

          fetch('http://localhost:3000/upload', {
            method: 'POST',
            body: formData
          })
          .then(response => response.json())
          .then(result => {
            resolve(result.url)
          })
          .catch(error => {
            reject(error)
          })
        })
      }
    }
  }
})

在组件中使用自定义上传图片的路径

<vue-quill-editor
  :options="{
    modules: {
      imageUploader: {
        upload: (file) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file)

            fetch('http://localhost:3000/upload', {
              method: 'POST',
              body: formData
            })
            .then(response => response.json())
            .then(result => {
              resolve(result.url)
            })
            .catch(error => {
              reject(error)
            })
          })
        }
      }
    }
  }"
  v-model="content">
</vue-quill-editor>

示例代码

<template>
  <vue-quill-editor
    :options="{
      modules: {
        imageUploader: {
          upload: (file) => {
            return new Promise((resolve, reject) => {
              const formData = new FormData()
              formData.append('image', file)

              fetch('http://localhost:3000/upload', {
                method: 'POST',
                body: formData
              })
              .then(response => response.json())
              .then(result => {
                resolve(result.url)
              })
              .catch(error => {
                reject(error)
              })
            })
          }
        }
      }
    }"
    v-model="content">
  </vue-quill-editor>
</template>

<script>
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>