VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)

准备工作：安装  yarn install vue-quill-editor

main.js

// 编辑器
import VueQuillEditor from 'vue-quill-editor'
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 需要在new VUE之前
Vue.use(VueQuillEditor);

test.vue

<template>
  <div>
    <!--    // 新增按钮-->
    <div style="width: 100%; text-align: right;">
      <el-button type="success" style="float: left" @click="addCommodity">新增商品</el-button>
    </div>
    <br><br>


    <div>
      <el-dialog title="新增商品信息" :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
       
          <el-form-item label="商品介绍" :rules="[{ required: true, message: '请输入商品介绍', trigger: 'blur' }]"><br>
            <quill-editor
                v-model="content"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {quillRedefine} from 'vue-quill-editor-upload'

export default {
  name: "CommodityList",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: 200,
      form: {
        xuni: 0,
      },
      content: '',
      uploadUrl: this.$webSite + "/manage/upload_api/",

    }
  },


  created() {
    this.editorOption = quillRedefine(//修改富文本编辑器图片上传路径
        {
          // 图片上传的设置
          uploadConfig: {
            action: this.uploadUrl,  // 必填参数 图片上传地址\
            too: [['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 2}], [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}], [{'indent': '-1'}, {'indent': '+1'}], [{'direction': 'rtl'}], [{'size': ['small', false, 'large', 'huge']}], [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': []}], [{'font': []}], [{'align': []}], ['clean'], ['image']],
            header: (xhr) => {
              //关键是这句话
              xhr.setRequestHeader('Authorization', window.localStorage.getItem('token'));
              xhr.setRequestHeader('Username', window.localStorage.getItem('userid'));
              return xhr
            },
            res: (response) => {
              return response.url;//return图片url
            },
            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',
            name: 'file'  // 图片上传参数名
          }
        })
    this.editorOption.modules = {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'], //引用，代码块
        [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
        [{'list': 'ordered'}, {'list': 'bullet'}], //列表
        [{'script': 'sub'}, {'script': 'super'}], // 上下标
        [{'indent': '-1'}, {'indent': '+1'}], // 缩进
        [{'direction': 'rtl'}], // 文本方向
        [{'size': ['small', false, 'large', 'huge']}], // 字体大小
        [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
        [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
        [{'font': []}], //字体
        [{'align': []}], //对齐方式
        ['clean'], //清除字体样式
        ['image'] //上传图片、上传视频
      ],
    }
    this.editorOption.placeholder = "请输入商品描述"
  },

  methods: {
    addCommodity() {
      this.dialogFormVisible = true;
    }
  }
}
</script>

<style scoped>

</style>

views.py

class ImageArticleView(APIView):
    @check_role
    def post(self, request):
        file_data = request.FILES['file']  # 获取上传的文件数据
        file_type = '.' + file_data.name.split('.')[-1]
        tmp_data = uid()
        file_data.name = tmp_data + file_type
        file_path = 'http://127.0.0.1:8000' + '/media/image_path/' + file_data.name
        image = ImageUpload(
            sid=tmp_data,
            image=file_data,
            account=account(request)
        )
        image.save()
        response_data = {'file_name': file_data.name, 'url': file_path}
        print('upload response: ', response_data)
        return JsonResponse(response_data)

至此，只要点击图片并上传后，图片会插入到编辑器当中，以URL的方式进行保存。