vue-quill-editor是vue很好的富文本編輯器，富文本的功能基本上都支持，樣式是黑白色，簡潔大方。
第一步下載 vue-quill-editor：
npm i vue-quill-editor -S
第二步，將vue-quill-editor引入到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' Vue.use(VueQuillEditor);
第三步，就可以在組件里面使用了。
1 //html 2 3 <div> 4 <quill-editor v-model="ruleForm.content" 5 :options="editorOption" 6 @blur="onEditorBlur($event)" 7 @focus="onEditorFocus($event)" 8 @change="onEditorChange($event)"> 9 </quill-editor> 10 </div>
//js <script> import { quillEditor } from 'vue-quill-editor' import Quill from 'quill' //引入編輯器 export default { components: {quillEditor}, data () { return { content: null, editorOption: { modules: { toolbar: [ ["bold", "italic", "underline", "strike"], // 加粗 斜體 下划線 刪除線 ["blockquote", "code-block"], // 引用 代碼塊 [{ header: 1 }, { header: 2 }], // 1、2 級標題 [{ list: "ordered" }, { list: "bullet" }], // 有序、無序列表 [{ script: "sub" }, { script: "super" }], // 上標/下標 [{ indent: "-1" }, { indent: "+1" }], // 縮進 // [{'direction': 'rtl'}], // 文本方向 [{ size: ["small", false, "large", "huge"] }], // 字體大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標題 [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色 [{ font: [] }], // 字體種類 [{ align: [] }], // 對齊方式 ["clean"], // 清除文本格式 ["link", "image", "video"] // 鏈接、圖片、視頻 ], //工具菜單欄配置 }, placeholder: '請在這里添加產品描述', //提示 readyOnly: false, //是否只讀 theme: 'snow', //主題 snow/bubble syntax: true, //語法檢測 } } }, methods: { // 失去焦點 onEditorBlur(editor) {}, // 獲得焦點 onEditorFocus(editor) {}, // 開始 onEditorReady(editor) {}, // 值發生變化 onEditorChange(editor) { this.content = editor.html; console.log(editor); }, }, computed: { editor() { return this.$refs.myQuillEditor.quill; } },
這樣就可以使用富文本了。。如下圖：
但是這樣要是上傳個圖片，圖片是不能放大，縮小和拖拽的，所以要想讓圖片放大，縮小可以拖拽，請繼續往下看。。。。
實現圖片拖拽，放大和縮小，需要下載 vue-quill-editor image依賴的功能插件。
npm i quill-image-drop-module -S
npm i quill-image-resize-module -S
然后在組件里引入使用：
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);
editorOption: { modules:{ imageDrop: true, //圖片拖拽 imageResize:{ //放大縮小 displaySize: true }, toolbar: { container: toolbarOptions, // 工具欄 } }, }, theme:'snow' },
這樣圖片就可以放大縮小，和拖拽了。
富文本編輯器的圖片上傳，顯示的地址是base64格式，如何圖片上傳過多的話就會特別減緩富文本的提交速度，特別慢而且會報錯。
所以會選擇將圖片上傳到服務器上，然后返回后台給的img鏈接，最后顯示在富文本對應的位置。
富文本上傳我用過兩種方法：
方法一：給后台傳的圖片格式是formData格式，就是文件格式
將圖片上傳到服務器需要vue-quill-editor 的 image擴展插件，首先下載這個插件：
npm i quill-image-extend-module -S
然后將插件引入富文本組件中使用。
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)；
editorOption:{
modules:{
toolbar: {
container: toolbarOptions, // 工具欄
handlers: {
'image': function () { //觸發圖片上傳的時候返回的信息
QuillWatch.emit(this.quill.id) //使用圖片上傳插件的統一寫法
}
}
},
imageResize: { //圖片放大縮小
displaySize: true
},
ImageExtend: { //使用的圖片上傳擴展插件
name: 'img', //傳的參數名
size: 2, // 單位為M, 1M = 1024KB
action: url, //后台上傳圖片的接口地址
headers: (xhr) => { //請求頭
},
response: (res) => {
console.log(res);
return res.data[0]; //返回的圖片信息
}
},
},
},
方法二：由於后台強調圖片上傳的時候，需要給他傳的 img參數 必須是base64格式的；所以我就只能放棄第一種方法，使用下面的這個方法。
這個方法需要結合element ui的圖片上傳插件一起使用。
//html
<div class="edit_container" style="margin-bottom: 20px"> <!-- 圖片上傳組件輔助--> <el-upload class="avatar-uploader" :action="serverUrl" name="img" :before-upload="beforeUpload"> </el-upload> <!--富文本編輯器組件--> <el-row v-loading="uillUpdateImg"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> </el-row> </div>
editorOption: { modules:{ imageDrop: true, imageResize:{ displaySize: true }, toolbar: { container: toolbarOptions, // 工具欄 handlers: { 'image': function (value) { if (value) { // 觸發input框選擇圖片文件 document.querySelector('.avatar-uploader input').click() } else { this.quill.format('image', false); } } } }, }, theme:'snow' },
// 上傳圖片前 beforeUpload(file) { //element 上傳圖片的方法 console.log(file); var _this = this; // 獲取富文本組件實例 let quill = this.$refs.myQuillEditor.quill; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { var obj = { imgData:e.target.result, //給后台傳的參數 base64格式的img參數 }; findList.uploadImage(qs.stringify(obj)).then(data => { console.log(data,'上傳的圖片') console.log(data.ResultObj); if(data.ResultCode==1){ // 獲取光標所在位置 let length = quill.getSelection(true).index; // 插入圖片 res.info為服務器返回的圖片地址 quill.insertEmbed(length, 'image', data.ResultObj); // 調整光標到最后 quill.setSelection(length + 1) }else{ this.$message({ message: '圖片上傳失敗!', type: 'error' }); } }); }; return file; },