技術標籤：vue

1.安裝依賴

npm install vue-quill-editor --save

2.全域性注入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
 
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor, /* { default global options } */)

 

或者區域性引入：

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
}

3.全部程式碼

<template>
<div class="row col-md-12 col-xs-12" id="
 
ownParsing" style="display: none;">
<el-upload
 class="avatar-uploader"
 action="serverUrl"
 :http-request="requestUpload"
 name="img"
 :show-file-list="false">
 </el-upload>
 <quill-editor
   id="ownParsingtxt"
 

   ref="quillEditor"
   class="editor"
   :v-model="imgtext"
   :options="editorOption"
   @blur="onEditorBlur($event)"
   @focus="onEditorFocus($event)"
   @ready="onEditorReady($event)"
   @change="onEditorChange($event)"/>
   </quill-editor>
 </div>
</template>
<style>
/*----隱藏其它，只顯示圖片上傳這部分----*/
.ql-video,.ql-bold,.ql-italic,.ql-underline,.ql-strike,
.ql-blockquote,.ql-code-block,.ql-header,.ql-list,.ql-script,
.ql-indent,.ql-direction,.ql-size,.ql-picker,.ql-picker-label,
.ql-clean,.ql-link{
    display: none !important;
}
.ql-toolbar.ql-snow .ql-formats {
     margin-right: 0 !important;
}
/*---隱藏el-uploader-----*/
.avatar-uploader{
    display: none !important;
}
</style>
<script type="text/javascript">
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const toolbarOptions = [
    ['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'],
    ['link','image', 'video']
]
export default {
 name: '',
 data() {
   return {
     imgtext:'',
      editorOption: {
          placeholder: '',
          theme: 'snow',
          modules: {
              toolbar: {
                  container: toolbarOptions,
                  handlers: {
                      image: function(value) {
                          if (value) {
                              // 觸發input框選擇圖片檔案
                              document.querySelector('.avatar-uploader input').click()
                          } else {
                              this.quill.format('image', false)
                          }
                      }
                  }
              }
          }
      },
    }
  } ,
  computed: {
    editor() {
        return this.$refs.quillEditor.quill
    }
  },
  methods: {
    onEditorBlur(quill) {
        //console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
        //console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
        //console.log('editor ready!', quill)
    },
    onEditorChange(quill) {
        //quillchangevalue=quill.html
        //console.log(quillchangevalue)
        //console.log('Change!', quill)
    },
    location(url) {
        const quill = this.$refs.quillEditor.quill
        const length = quill.getSelection().index
        // 插入圖片  res.info為伺服器返回的圖片地址
        quill.insertEmbed(length, 'image', url)
        // 調整游標到最後
        quill.setSelection(length + 1)
    },
    requestUpload(params) {
        let that=this;
        console.log(params)
        if (params) {
            //console.log(params.file)
            let fromData = new FormData();
            fromData.append('file', params.file)
            console.log(fromData)
            fromData.append('bucketName', 'quesimg')
            const fwq = 'https://www.ffff.cn'//你放圖片的伺服器
            $.ajax({//這部分就是你請求介面，我這是老專案沒有改成封裝的
                data:fromData,
                type:"POST",
                dataType:"JSON",
                url:httpUrl+"/file",
                contentType:false,
                //取消幫我們格式化資料，是什麼就是什麼
                processData:false,
                // headers:{'Content-Type':'multipart/form-data'},
                success:function(res) {
                    console.log(res)
                    that.detailsUrl = fwq + '/' + 'quesimg' + '/' + res.objectName;
                    console.log(that.detailsUrl)//伺服器返回的圖片地址
                    that.location(that.detailsUrl)
                }
            })
            // this.uploadOneAPI(fromData, 'quesimg')
        }
    },
 }
}
</script>

效果圖如下：