優秀的富文本編輯器有很多，比如：UEditor，wangEditor 等，但并不是每個都能在移動端有很好的表現。

我們暫且不討論移動端是否真的需要富文本，既然有這需求，就把它實現出來。

失敗的嘗試

正確的選擇是成功的開始，開發之前肯定要做一些調研。

通過各種資料搜集，確定了幾個備選的：UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tinymce。

UEditor 是百度的老牌富文本編輯器，但界面有一股上世紀的感覺，官網最新的一條動態停留在 2016-05-18。官方已經多年不維護了，但民間教程資料很多，所以最后一個嘗試吧，其他的搞不定再用 UEditor 。

wangEditor 的確讓人眼前一亮，用官方的話來說就是輕量、簡潔、易用、開源免費。覺得這個不錯，首先在項目中嘗試它。遺憾的發現 wangEditor 在移動端的表現有些讓人失望，比如我要設置一個 H1 標題，時靈時不靈的，有時能設置成功，有時不能，大多數時候都不成功，不知道是不是我操作的問題。

接下來嘗試 vue-html5-editor ，看介紹還挺好的。按照教程一頓操作后，編輯器并沒有在頁面上如期而至… 排查了好多次都沒有找到問題在哪里，算了吧… 還好還有其他選擇。

終于找到你

然后嘗試用vue-quill-editor，之所以一開始不用，是因為文檔都是英文的… 英文文檔畢竟沒有中文看著舒服，所以先嘗試有中文文檔的框架。誰曾想其他幾個太不爭氣了，只好用這個。在移動端的效果出人意料的好，看一下真實效果：

完美支持各種文字效果，還能插入圖片，編輯器的外觀也挺好看，就它了！

在項目中使用

在項目中快速集成，需要兩個文檔：vue-quill-editor 的 github 主頁 和 Quill 官網。

基礎的使用方式在 vue-quill-editor 都有介紹，如果想做一些個性化配置，就需要看 Quill 官網 關于各種屬性的文檔了。

下面說一下我集成的步驟：

1. 安裝 vue-quill-editor

npm install vue-quill-editor —save 復制代碼

2. 全局引入

在 main.js 中將 vue-quill-editor 引入項目

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 } */) 復制代碼

其中 Vue.use(VueQuillEditor, /* { default global options } */) 第二個參數是 Quill 的配置。在這里我只改了默認的 placeholder 提示語，所以最后一行應該是：

Vue.use(VueQuillEditor, {placeholder: '請輸入內容', }); 復制代碼

詳細的配置請參考 Quill 官網

3. 代碼中使用

直接使用 <quill-editor> 標簽即可

<template><!-- bidirectional data binding（雙向數據綁定） --><quill-editor v-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"></quill-editor></template> 復制代碼

完整代碼

上圖效果的代碼如下：

<template><div class="wrapper"><div class="title" v-html="title"></div><div class="input-wrapper" v-for="(option,index) in options"><div class="sub-title">{{'(' + option.item + ').'}}</div><quill-editor class="editor"v-model="messages[index]"ref="myQuillEditor"@blur="onEditorBlur"@focus="onEditorFocus"@ready="onEditorReady"></quill-editor></div></div> </template><script>export default {components: {},props: {item: {type: Object,required: true},index: {type: Number,required: true},},data() {return {messages: [],}},methods: {onEditorBlur() {console.log('blur',this.messages)},onEditorFocus(){console.log('focus',this.messages)},onEditorReady(){console.log('ready',this.messages)}} </script><style lang="scss">.wrapper {width: 100%;display: flex;flex-direction: column;box-sizing: border-box;.title {font-size: $font-size-large;color: $text-main;padding-bottom: px2rem(6);line-height: 150%;}.input-wrapper {display: flex;flex-direction: row;width: 100%;margin: px2rem(5) 0;box-sizing: border-box;.editor{width: 100%;height: px2rem(200);}.sub-title {font-size: $font-size-normal;color: $text-normal;}.field {flex: 1;border: 1px solid $border-third;}}}div.ql-container.ql-snow{height: px2rem(100);}div.ql-editor.ql-blank{height: px2rem(50);}</style>復制代碼

與公司業務強相關的部分數據和接口做了刪減。

有兩個點需要注意：

編輯器默認的輸入框高度很高，導致輸入框與其他內容重疊，可通過最后兩段樣式來更改輸入框的高度。

可以在一個頁面上顯示多個富文本輸入框，本例中就將輸入框放在了 v-for 循環里。如何區分每個輸入框的值呢？只需在綁定時 v-model="messages[index]" 利用 index 綁定對應的數組位置即可。

以上就是 vue-quill-editor 在實際項目中的使用。

總結

以上是生活随笔為你收集整理的基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。