vue-quill-editor富文本編輯器超詳細(xì)入門使用步驟

更新時間：2022年08月17日 15:09:10 作者：小菜鳥的前端日記

vue中很多項目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器入門使用步驟的相關(guān)資料,需要的朋友可以參考下

首先放上效果圖

1.安裝

npm install vue-quill-editor -S

2.引入到項目中

有兩種掛載方式：全局掛載和在組件中掛載，根據(jù)自己的項目需求選擇，一般用到富文本編輯都是在某一個項目中，這里只寫在項目中掛載的方式

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

3.在頁面上寫組件

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>

// 失去焦點事件
  onEditorBlur(quill) {
    console.log('editor blur!', quill)
  },
// 獲得焦點事件
  onEditorFocus(quill) {
    console.log('editor focus!', quill)
  },
// 準(zhǔn)備富文本編輯器
  onEditorReady(quill) {
    console.log('editor ready!', quill)
  },
// 內(nèi)容改變事件
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html
  },

4.配置option

// 富文本編輯器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
            ['blockquote', 'code-block'], // 引用  代碼塊
            [{ header: 1 }, { header: 2 }], // 1、2 級標(biāo)題
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
            [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)
            [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 標(biāo)題
            [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
            // [{ font: ['songti'] }], // 字體種類
            [{ align: [] }], // 對齊方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 鏈接、圖片、視頻
          ]
        },
        placeholder: '請輸入正文'
      },

這里的size和header經(jīng)過了處理，如圖：換成了自定義內(nèi)容，例如，修改字號，方法如下：

4.1.找到node_modules里的quill/dist/quill.js

4.2.在文件中搜索small，快速找到，然后修改成你想要的數(shù)據(jù)，這里簡單，直接貼圖

4.3.修改完js之后，需要修改一下css文件，這樣你設(shè)置的才生效，在同級目錄下找到quill.snow.css文件，同樣搜索small所在的位置，仿照著改就行，主要是這兩處

可以把原先的注釋掉，也可以保留，影響不大，相當(dāng)于你設(shè)置另一套css

// 這個是字號數(shù)字對應(yīng)的顯示的內(nèi)容，vertical-align根據(jù)個人需要加不加，因為我頁面那個字與其他對不齊
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  content: '12px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  content: '14px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  content: '16px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  content: '18px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  content: '20px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  content: '22px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  content: '24px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  content: '28px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  content: '32px';
  vertical-align: top;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  content: '36px';
  vertical-align: top;
}
 
// 這個是字號數(shù)字對應(yīng)的px值
.ql-editor .ql-size-12 {
  font-size: 12px;
}
.ql-editor .ql-size-14 {
  font-size: 14px;
}
.ql-editor .ql-size-16 {
  font-size: 16px;
}
.ql-editor .ql-size-18 {
  font-size: 18px;
}
.ql-editor .ql-size-20 {
  font-size: 20px;
}
.ql-editor .ql-size-22 {
  font-size: 22px;
}
.ql-editor .ql-size-24 {
  font-size: 24px;
}
.ql-editor .ql-size-28 {
  font-size: 28px;
}
.ql-editor .ql-size-32 {
  font-size: 32px;
}
.ql-editor .ql-size-36 {
  font-size: 36px;
}
 
// 選擇字號富文本字的大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
  font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
  font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
  font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
  font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
  font-size: 22px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
  font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
  font-size: 28px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
  font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
  font-size: 36px;
}

富文本里面的下拉框默認(rèn)是不滾動的，想要滾動效果，加上下面的css

/*加上height和滾動屬性就可以，滾動條樣式是系統(tǒng)默認(rèn)樣式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}

5.給工具欄鼠標(biāo)懸停加上中文釋義

找到元素可以看到，每一個tool都有一個class，這個的原理就是先把所有的class列出來，然后根據(jù)class獲取元素，給它加上title屬性就可以了

先定義一個數(shù)組，把所有的工具放在里面

// toolbar標(biāo)題
const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳轉(zhuǎn)配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜體' },
  { Choice: '.ql-underline', title: '下劃線' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '刪除線' },
  { Choice: '.ql-blockquote', title: '塊引用' },
  { Choice: '.ql-code', title: '插入代碼' },
  { Choice: '.ql-code-block', title: '插入代碼段' },
  { Choice: '.ql-font', title: '字體' },
  { Choice: '.ql-size', title: '字體大小' },
  { Choice: '.ql-list[value="ordered"]', title: '編號列表' },
  { Choice: '.ql-list[value="bullet"]', title: '項目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '對齊方式' },
  { Choice: '.ql-color', title: '字體顏色' },
  { Choice: '.ql-background', title: '背景顏色' },
  { Choice: '.ql-image', title: '圖像' },
  { Choice: '.ql-video', title: '視頻' },
  { Choice: '.ql-link', title: '添加鏈接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字體格式' },
  { Choice: '.ql-script[value="sub"]', title: '下標(biāo)' },
  { Choice: '.ql-script[value="super"]', title: '上標(biāo)' },
  { Choice: '.ql-indent[value="-1"]', title: '向左縮進(jìn)' },
  { Choice: '.ql-indent[value="+1"]', title: '向右縮進(jìn)' },
  { Choice: '.ql-header .ql-picker-label', title: '標(biāo)題大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '標(biāo)題一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '標(biāo)題二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '標(biāo)題三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '標(biāo)題四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '標(biāo)題五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '標(biāo)題六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '標(biāo)準(zhǔn)' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小號' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標(biāo)準(zhǔn)' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左對齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對齊' }
]

然后在function中循環(huán)，找到元素，添加title，至于放在那個function根據(jù)具體情況看，反正得是在頁面上已經(jīng)渲染好元素之后，不然會獲取不到元素，可以直接放在@ready的函數(shù)里面

for (let item of titleConfig) {
        let tip = document.querySelector('.quill-editor ' + item.Choice)
        if (!tip) continue
        tip.setAttribute('title', item.title)
      }

至此，一個富文本編輯器，基本可以使用

6.上傳圖片到七牛云

一般會遇到需要上傳圖片的操作，圖片肯定不能只是保存到本地，這個根據(jù)項目需求，我是放在七牛云上。

添加一個上傳組件，并隱藏起來，以免影響頁面：

<el-upload
  v-show="false"
  class="avatar-uploader"
  :data='fileUpload'
  :show-file-list="false"
  :http-request="onUploadHandler"
 >
</el-upload>

在option中配置上傳操作，之前的option就耀稍作修改

 editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
              ['blockquote', 'code-block'], // 引用  代碼塊
              [{ header: 1 }, { header: 2 }], // 1、2 級標(biāo)題
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
              [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)
              [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
              [{ direction: 'rtl' }], // 文本方向
              [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
              [{ header: [1, 2, 3, 4, 5, 6] }], // 標(biāo)題
              [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
              // [{ font: ['songti'] }], // 字體種類
              [{ align: [] }], // 對齊方式
              ['clean'], // 清除文本格式
              ['image', 'video'] // 鏈接、圖片、視頻
            ],
            handlers: {
              'image': function (value) {
                if (value) { // value === true
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        },
        placeholder: '請輸入正文'
      }

點擊富文本上的上傳圖片，就會觸發(fā)這里的handlers，將操作引到upload的函數(shù)上，在這個函數(shù)里面需要做的操作是，將圖片上傳到七牛云，并拿到返回的在線鏈接，然后將圖片鏈接插入到頁面對應(yīng)位置上。這里我的上傳是自己封裝了函數(shù)。

async onUploadHandler(e) {
      const imageUrl = 上傳七牛云后返回來的一串在線鏈接
 
      // 獲取光標(biāo)所在位置
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 插入圖片  
      quill.insertEmbed(length, 'image', imageUrl)
      // 調(diào)整光標(biāo)到最后
      quill.setSelection(length + 1)
      // this.content += url
    }

7.自定義控制圖片大小

先安裝插件

npm i quill-image-resize-module -S

插件需要webpack支持?。。?/p>

編輯 vue.config.js 文件修改vue.config.js后需要重新啟動項目方可生效

plugins: [
    ...
    new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js',
      'Quill': 'quill/dist/quill.js'
    })
    ...

在頁面上引入，并且在data中，與toolbar平級進(jìn)行配置

import * as Quill from 'quill'
// 調(diào)整上傳圖片大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
 
 
 
modules:{
    toolbar: {},
    // 調(diào)整圖片大小
     imageResize: {
         displayStyles: {
             backgroundColor: 'black',
             border: 'none',
             color: 'white'
         },
         modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
     }
}