VueQuillEditor富文本編輯器的使用

前言

以前我對富文本的使用和保存不是很懂，停留在理解爲textarea就是富文本的階段，後來接觸到了UEditor，被它華麗的外表所驚豔，按鈕多功能豐富，但是使用起來卻沒那麼順手。
慢慢開始學習前端開發框架，學習使用Vue就開始正視前端的學習其中接觸到了vue-quill-editor和Tinymce，學Vue的這兩款應該都會接觸到但從功能上來講Tinymce肯定優秀一點，但是我自己覺得vue-quill-editor更適合我的項目一些，我就使用了vue-quill-editor，接下來介紹一下我的使用心得。

關鍵詞

安裝和使用 、固定長度、內部滾動條、滾動條樣式修改、修改圖片大小

正文

首先是安裝

npm install vue-quill-editor --save-dev

然後是在src/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'
import Quill from 'quill'
// 將富文本編輯器，註冊爲全局可用組件
Vue.use(VueQuillEditor)

使用方式

<quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
        >

工具欄是可以自己定義的：

editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            // 工具欄
            container: toolbarOptions.toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }

我將toolbarOptions單獨存爲一個文件，內容如下：

const toolbarOptions = [
  // toggled buttons
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote'],
  // custom button values
  [{'header': 1}, {'header': 2}],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  // superscript/subscript
  [{'script': 'sub'}, {'script': 'super'}],
  // outdent/indent
  [{'indent': '-1'}, {'indent': '+1'}],
  // text direction
  [{'direction': 'rtl'}],
  [{'size': ['10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']}],
  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  // dropdown with defaults from theme
  [{'color': []}, {'background': []}],
  [{'font': []}],
  [{'align': []}],
  ['image'],
  // remove formatting button
  ['clean']
]

export default {
  toolbarOptions
}

前端如何展示富文本呢？

<p class="ql-editor" v-html="articleObj.content"></p>

這裏有一個地方是重點，就是class="ql-editor"，因爲我在使用p標籤的時候發現，有時候字體不生效，居中不生效，原來是沒加這個class。

樣式修改

首先是如何修改富文本框大小的問題，一開始爲了讓富文本大小不是特別小，我使用了這一點樣式來配置：

/* 編輯器初始高度 */
.ql-editor {
  min-height: 6rem;
}

當超出行的時候，整個頁面都會被拉長，整個頁面出現滾動條，而不是行內擴充，出現滾動條

這個問題的主要原因是我對CSS樣式的使用不熟，解決辦法如下：

內部滾動條

/* 編輯器內部出現滾動條 */
.ql-container{
  overflow-y:auto;
  height:8rem!important;
}

然而滾動條還是太醜了。

修改滾動條樣式

/*滾動條整體樣式*/
.ql-container ::-webkit-scrollbar{
  width: 10px;/*豎向滾動條的寬度*/
  height: 10px;/*橫向滾動條的高度*/
}
.ql-container ::-webkit-scrollbar-thumb{/*滾動條裏面的小方塊*/
  background: #666666;
  border-radius: 5px;
}
.ql-container ::-webkit-scrollbar-track{/*滾動條軌道的樣式*/
  background: #ccc;
  border-radius: 5px;
}

這樣一改，滾動條就好看多了吧？是不是？

修改圖片大小

上傳的圖片如果不能修改大小那真是災難，所以還是要修改大小的組件，還好已經有人解決了這個組件
一樣的，首先是安裝

npm install quill-image-resize-module --save-dev

在src/main.js引入

import imageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', imageResize)

使用效果如下：

總結

富文本的使用，沒有最好的，只有最適合自己的，我在這裏遇到很多坑，有的是上網搜解決的，有的是自己冥思苦想出來的，主要還是前端的知識沒有那麼熟練導致的，所以現在愈發的對前端的開發重視起來，認真總結經驗，讓前端更加熟悉。
在使用富文本的時候，肯定會遇到圖片的上傳問題，要麼直接傳文件流然後以圖片的形式保存，數據庫保存路徑即可，要麼是以base64傳字符串，到了後臺要麼轉換回圖片，要麼就以base64保存到數據庫，顯然在數據庫保存圖片路徑纔是最佳的選擇，至於你以什麼方式傳都行，然後前端需要回傳一個圖片的地址即可，下一篇我就將介紹，vue-quill-editor是如何上傳圖片並回傳地址的。