Vue富文字帶圖片修改圖片大小自定義選擇項自定義字型

1依賴

npm install vue-quill-editor --save
npm install quill-image-extend-module --save-dev
npm i quill-image-resize-module --save-dev
複製程式碼

2.引入樣式（main.js或元件內,元件內使用最佳）

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
複製程式碼

<template>
  <div>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="handleEditCha"
    >
    </quill-editor>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import '../../style/font.css'   //css檔案引入
  
  import { addQuillTitle } from './title'

  import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
  import  ImageResize  from 'quill-image-resize-module';

  Quill.register('modules/ImageExtend', ImageExtend)
  Quill.register('modules/imageResize', ImageResize)
  import axios from 'axios'

  //自定義字型型別
  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);


  //自定義字型大小
   var sizes = [false,'16px', '18px', '20px','22px']
  var Size = Quill.import('formats/size');
  Size.whitelist = sizes;
  Quill.register(Size, true);
  
  
  
  export default {
    components: {quillEditor},
    name: "index",
    data() {
      return {
        token:'',
        content: '',
        editorOption: {
          modules: {
            ImageExtend: {
              loading: true,
              name: 'file',
              size: 7,
              action: '*******/伺服器上傳圖片地址',
              response: (res) => {
                return res.url
              },
              change: (xhr, formData) => {
                formData.append('token', this.token)
              }
            },
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            },
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
              ['blockquote', 'code-block'],
              [{'header': 1}, {'header': 2}],               // custom button values
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
              [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
              [{'direction': 'rtl'}],                         // text direction
              [{'size': sizes}],  // custom dropdown
              [{'header': [1, 2, 3, 4, 5, 6, false]}],
              [{'color': []}, {'background': []}],          // dropdown with defaults from theme
              [{'font': fonts}],
              [{'align': []}],
              ['link', 'image', 'formula']//去除video即可
            ],

          },
          placeholder: '編輯內容...'
        }
      }
    },
    methods: {
      handleEditCha({quill, html, text}) {
        // console.log('editor change!', quill, html, text)
        console.log(text) //純文字檔案
        console.log(html) //純文字檔案
        // this.content = html //帶標籤檔案
      },
      getToken() {
        axios.get('*******').then(res => {
          this.token = res.data.data
        })
      },
    },
    created(){
      this.getToken()
    },
    mounted(){
      addQuillTitle()
    }
  }
</script>

<style scoped lang="scss">

  /deep/ .ql-editor {
    min-height: 400px;
  }
  /deep/ .ql-snow .ql-tooltip{
    margin-left: 40% !important;
  }

  /deep/ .ql-snow .ql-picker.ql-font {
    width: 150px;
  }
</style>

複製程式碼

3.需要使用quill-image-resize-module模組時，需要修改wabpack配置

3.1 webpack.dev.conf.js //plugins陣列下新增

   new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
複製程式碼

3.2 webpack.prod.conf.js //plugins陣列下新增

   new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
複製程式碼

4.自定義字型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";
}

複製程式碼

5.自定義字型大小css

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
  font-size: 16px;
}

.ql-size-16px{
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
  font-size: 18px;
}

.ql-size-18px{
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: '20px';
  font-size: 20px;
}

.ql-size-20px{
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: '22px';
  font-size: 22px;
}

.ql-size-22px{
  font-size: 22px;
}

複製程式碼

6.自定義title.js

const titleConfig = {
  'ql-bold':'加粗',
  'ql-color':'字型顏色',
  'ql-font':'字型型別',
  'ql-code':'插入程式碼',
  'ql-italic':'斜體',
  'ql-link':'新增連結',
  'ql-background':'背景顏色',
  'ql-size':'字型大小',
  'ql-strike':'刪除線',
  'ql-script':'上標/下標',
  'ql-underline':'下劃線',
  'ql-blockquote':'引用',
  'ql-header':'標題',
  'ql-indent':'縮排',
  'ql-list':'列表',
  'ql-align':'文字對齊',
  'ql-direction':'文字方向',
  'ql-code-block':'程式碼塊',
  'ql-formula':'公式',
  'ql-image':'圖片',
  'ql-video':'視訊',
  'ql-clean':'清除字型樣式'
};
export function addQuillTitle(){
  const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect =  oToolBar.querySelectorAll('select'),
    aSpan= oToolBar.querySelectorAll('span');
  aButton.forEach((item)=>{
    if(item.className === 'ql-script'){
      item.value === 'sub' ? item.title = '下標': item.title = '上標';
    }else if(item.className === 'ql-indent'){
      item.value === '+1' ? item.title ='向右縮排': item.title ='向左縮排';
    }else if(item.className === 'ql-list'){
      item.value==='ordered' ? item.title='有序列表' : item.title='無序列表'
    }else if(item.className === 'ql-header'){
      item.value === '1' ? item.title = '標題H1': item.title = '標題H2';
    }else{
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach((item)=>{
    if(item.className!='ql-color'&&item.className!='ql-background'){
      item.parentNode.title = titleConfig[item.classList[0]];
    }
  });
  aSpan.forEach((item)=>{
    if(item.classList[0]==='ql-color'){
      item.title = titleConfig[item.classList[0]];
    }else if(item.classList[0]==='ql-background'){
      item.title = titleConfig[item.classList[0]];
    }
  });
}

複製程式碼