vue中使用vue-quill-editor富文本編輯器，自定義toolbar修改工具欄options,上傳圖片+美化頭部+實用功能

前提：

要知道 vue-quill-editor是沒有文字說明的，現在加個文字說明和上傳圖片，代碼有用！

1、效果圖

2、代碼

        <!-- 圖片上傳組件輔助-->
        <el-upload class="avatar-uploader-editor" :action="serverUrl" name="img" :headers="header" :show-file-list="false"
          :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload"> </el-upload>
        <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
          <!-- 自定義toolar -->
          <div id="toolbar" slot="toolbar">
            <!-- Add a bold button -->
            <button class="ql-bold" title="加粗">Bold</button>
            <button class="ql-italic" title="斜體">Italic</button>
            <button class="ql-underline" title="下劃線">underline</button>
            <button class="ql-strike" title="刪除線">strike</button>
            <button class="ql-blockquote" title="引用"></button>
            <button class="ql-code-block" title="代碼"></button>
            <button class="ql-header" value="1" title="標題1"></button>
            <button class="ql-header" value="2" title="標題2"></button>
            <!--Add list -->
            <button class="ql-list" value="ordered" title="有序列表"></button>
            <button class="ql-list" value="bullet" title="無序列表"></button>
            <!-- Add font size dropdown -->
            <select class="ql-header" title="段落格式">
              <option selected>段落</option>
              <option value="1">標題1</option>
              <option value="2">標題2</option>
              <option value="3">標題3</option>
              <option value="4">標題4</option>
              <option value="5">標題5</option>
              <option value="6">標題6</option>
            </select>
            <select class="ql-size" title="字體大小">
              <option value="10px">10px</option>
              <option value="12px">12px</option>
              <option value="14px">14px</option>
              <option value="16px" selected>16px</option>
              <option value="18px">18px</option>
              <option value="20px">20px</option>
              <option value="30px">30px</option>
            </select>
            <select class="ql-font" title="字體">
              <option value="SimSun">宋體</option>
              <option value="SimHei">黑體</option>
              <option value="Microsoft-YaHei">微軟雅黑</option>
              <option value="KaiTi">楷體</option>
              <option value="FangSong">仿宋</option>
              <option value="Arial">Arial</option>
            </select>
            <!-- Add subscript and superscript buttons -->
            <select class="ql-color" value="color" title="字體顏色"></select>
            <select class="ql-background" value="background" title="背景顏色"></select>
            <select class="ql-align" value="align" title="對齊"></select> 
            <button class="ql-clean" title="清除字體樣式"></button> 
            <button class="ql-image" title="照片"></button>
          </div>
        </quill-editor>

import {
    Quill,quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  
  // 自定義字體大小
  let Size = Quill.import('attributors/style/size')
  Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '30px']
  Quill.register(Size, true)

  // 自定義字體類型
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋體', '黑體'
  ]
  var Font = Quill.import('formats/font')
  Font.whitelist = fonts
  Quill.register(Font, true) 
  export default {
    components: {
      quillEditor
    },
    data() {
      return {
        content: '',
        editorOption: {
          placeholder: "請輸入", //文章初始化提示語
          theme: "snow", // or 'bubble' 
          modules: {
            toolbar: {
              container: '#toolbar',
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 觸發input框選擇圖片文件                    
                    document.querySelector('.avatar-uploader-editor input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                },
              }
            }
          }
        },
        serverUrl: '/api/files/headUpload', //上傳的圖片服務器地址
      }
    },

// 富文本圖片上傳成功
      uploadSuccess(res,file) {
        console.log(res)
        let quill = this.$refs.myQuillEditor.quill
        // 如果上傳成功        
        if (res.code == 0) {
          // 獲取光標所在位置          
          let length = quill.getSelection().index;
          // 插入圖片res.url爲服務器返回的圖片地址
          quill.insertEmbed(length, 'image', res.data.url)
          // 調整光標到最後         
          quill.setSelection(length + 1)
        } else {
          this.$message.error('圖片插入失敗')
        }
      },
      // 富文本圖片上傳失敗   
      uploadError() {
        this.$message.error('圖片插入失敗')
      },
beforeUpload(file) {
        if (file.type != 'image/jpeg' && file.type != 'image/png') {
          this.$message.error('只能上傳jpg/png文件');
          return false
        }
      },

 3、引入css

 @import '../assets/css/font.css';

 

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋體";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑體";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微軟雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷體";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}