快捷導(dǎo)航

淺談vue中使用編輯器vue-quill-editor踩過的坑

更新時間：2020年08月03日 10:11:32 作者：maggie_live

這篇文章主要介紹了淺談vue中使用編輯器vue-quill-editor踩過的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

結(jié)合vue+element-ui+vue-quill+editor二次封裝成組件

1.圖片上傳

分析原因

項目中使用vue-quill-editor富文本編輯器，在編輯內(nèi)容的時候，我們往往會編輯圖片，而vue-quill-editor默認(rèn)的處理方式是直接將圖片轉(zhuǎn)成base64格式，導(dǎo)致上傳的內(nèi)容十分龐大，且服務(wù)器接受post的數(shù)據(jù)的大小是有限制的，很有可能就提交失敗，造成用戶體驗差。

引入element-ui

編輯editor.vue文件

<template>
  <div>
    <!-- 圖片上傳組件輔助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
  import axios from '@/API/';
	import { quillEditor } from "vue-quill-editor";
	import COS from "cos-js-sdk-v5";
	import Upload from '@/components/Upload.vue';
	import { addQuillTitle } from '../utils/quill-title.js';

	import "quill/dist/quill.core.css";
	import "quill/dist/quill.snow.css";
	import "quill/dist/quill.bubble.css";
	
  export default {
    data() {
      return {
      }
    },
    methods: {
      // 上傳圖片前
      beforeUpload(res, file) {
      	const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
		    const isLt1M = file.size / 1024 / 1024 < 1
		    if (!isJPG) {
		      this.$message.error('支持JPG、PNG格式的圖片，大小不得超過1M')
		    }
		    if (!isLt1M) {
		      this.$message.error('文件最大不得超過1M')
		    } 
		    return isJPG && isLt1M
      },
      // 上傳圖片成功
      uploadSuccess(res, file) {},
      // 上傳圖片失敗
      uploadError(res, file) {},
      // 上傳圖片處理過程
      upload(req){}
    }
  }
</script>

在editor.vue中引入vue-quill-editor

<template>
  <div>
    <!-- 圖片上傳組件輔助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <quill-editor 
      class="info-editor" 
      v-model="content" 
      ref="QuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>
<script>
  import axios from '@/API/';
	import { quillEditor } from "vue-quill-editor";
	import COS from "cos-js-sdk-v5";
	import Upload from '@/components/Upload.vue';
	import { addQuillTitle } from '../utils/quill-title.js';

	import "quill/dist/quill.core.css";
	import "quill/dist/quill.snow.css";
	import "quill/dist/quill.bubble.css";

  // 工具欄配置
  const toolbarOptions = [
	 ['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': ['small', false, 'large', 'huge']}], // custom dropdown
	 [{'header': [1, 2, 3, 4, 5, 6, false]}],

	 [{'color': []}, {'background': []}],     // dropdown with defaults from theme
	 [{'font': []}],
	 [{'align': []}],
	 ['link', 'image', 'video'],
	 ['clean']                     // remove formatting button
	]

  export default {
    data() {
      return {
      	editorOption: {
      		placeholder: '請輸入編輯內(nèi)容',
      		theme: 'snow', //主題風(fēng)格
      		modules: {
      			toolbar: {
      				container: toolbarOptions, // 工具欄
      				handlers: {
      					'image': function (value) {
      						if (value) {
      							document.querySelector('#quill-upload input').click()
      						} else {
      							this.quill.format('image', false);
      						}
      					}
      				}
      			}
      		}
      	}, // 富文本編輯器配置
      	content: '', //富文本內(nèi)容
      }
    },
    methods: {
      // 上傳圖片前
      beforeUpload(res, file) {
      	const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
		    const isLt1M = file.size / 1024 / 1024 < 1
		    if (!isJPG) {
		      this.$message.error('支持JPG、PNG格式的圖片，大小不得超過1M')
		    }
		    if (!isLt1M) {
		      this.$message.error('文件最大不得超過1M')
		    } 
		    return isJPG && isLt1M
      },
      // 上傳圖片成功
      uploadSuccess(res, file) {
      	let quill = this.$refs.QuillEditor.quill;
	      let length = quill.getSelection().index;
	      quill.insertEmbed(length, 'image', url);
	      quill.setSelection(length+1)
      },
      // 上傳圖片失敗
      uploadError(res, file) {
        this.$message.error('圖片插入失敗')
      },
      // 上傳圖片處理過程
      upload(req){}
    }
  }
</script>

<style scoped>
.avatar-uploader{
	display: none;
}
</style>

2.編輯器上增加title提示

在編輯器上增加一個quill-title.js的工具欄的title的配置文件

const titleConfig = {
 'ql-bold':'加粗',
 'ql-color':'字體顏色',
 'ql-font':'字體',
 'ql-code':'插入代碼',
 'ql-italic':'斜體',
 'ql-link':'添加鏈接',
 'ql-background':'背景顏色',
 'ql-size':'字體大小',
 'ql-strike':'刪除線',
 'ql-script':'上標(biāo)/下標(biāo)',
 'ql-underline':'下劃線',
 'ql-blockquote':'引用',
 'ql-header':'標(biāo)題',
 'ql-indent':'縮進(jìn)',
 '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 = '下標(biāo)': item.title = '上標(biāo)';
  }else if(item.className === 'ql-indent'){
   item.value === '+1' ? item.title ='向右縮進(jìn)': item.title ='向左縮進(jìn)';
  }else if(item.className === 'ql-list'){
   item.value==='ordered' ? item.title='有序列表' : item.title='無序列表'
  }else if(item.className === 'ql-header'){
   item.value === '1' ? item.title = '標(biāo)題H1': item.title = '標(biāo)題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]];
  }
 });
}

在editor.vue中引入quill-title.js

<template>
  <div>
    <!-- 圖片上傳組件輔助-->
    <el-upload
      class="avatar-uploader"
      action=""
      accept="image/jpg, image/jpeg, image/png, image/gif"
      :http-request="upload"
      :before-upload="beforeUploadImg"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :show-file-list="false">
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <quill-editor 
      class="info-editor" 
      v-model="content" 
      ref="QuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)">
    </quill-editor>
  </div>
</template>
<script>
  import axios from '@/API/';
	import { quillEditor } from "vue-quill-editor";
	import COS from "cos-js-sdk-v5";
	import Upload from '@/components/Upload.vue';
	import { addQuillTitle } from '../utils/quill-title.js';

	import "quill/dist/quill.core.css";
	import "quill/dist/quill.snow.css";
	import "quill/dist/quill.bubble.css";

  // 工具欄配置
  const toolbarOptions = [
	 ['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': ['small', false, 'large', 'huge']}], // custom dropdown
	 [{'header': [1, 2, 3, 4, 5, 6, false]}],

	 [{'color': []}, {'background': []}],     // dropdown with defaults from theme
	 [{'font': []}],
	 [{'align': []}],
	 ['link', 'image', 'video'],
	 ['clean']                     // remove formatting button
	]

  export default {
    data() {
      return {
      	editorOption: {
      		placeholder: '請輸入編輯內(nèi)容',
      		theme: 'snow', //主題風(fēng)格
      		modules: {
      			toolbar: {
      				container: toolbarOptions, // 工具欄
      				handlers: {
      					'image': function (value) {
      						if (value) {
      							document.querySelector('#quill-upload input').click()
      						} else {
      							this.quill.format('image', false);
      						}
      					}
      				}
      			}
      		}
      	}, // 富文本編輯器配置
      	content: '', //富文本內(nèi)容
      }
    },
    mounted(){
	    addQuillTitle();
	  },
    methods: {
      // 上傳圖片前
      beforeUpload(res, file) {
      	const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' 
		    const isLt1M = file.size / 1024 / 1024 < 1
		    if (!isJPG) {
		      this.$message.error('支持JPG、PNG格式的圖片，大小不得超過1M')
		    }
		    if (!isLt1M) {
		      this.$message.error('文件最大不得超過1M')
		    } 
		    return isJPG && isLt1M
      },
      // 上傳圖片成功
      uploadSuccess(res, file) {
      	let quill = this.$refs.QuillEditor.quill;
	      let length = quill.getSelection().index;
	      quill.insertEmbed(length, 'image', url);
	      quill.setSelection(length+1)
      },
      // 上傳圖片失敗
      uploadError(res, file) {
        this.$message.error('圖片插入失敗')
      },
      // 上傳圖片處理過程
      upload(req){}
    }
  }
</script>

<style scoped>
.avatar-uploader{
	display: none;
}
</style>

補充知識：Vue引用quill富文本編輯器，圖片處理的兩個神器插件（quill-image-drop-module、quill-image-resize-module）的正確姿勢。（解決各種報錯）

一、前言

我在vue-quill-editor的Github認(rèn)識了這兩個插件。

quill-image-drop-module：允許粘貼圖像并將其拖放到編輯器中。

quill-image-resize-module：允許調(diào)整圖像大小。

都很實用吶！

然而DEMO不夠詳細(xì)，實際引用時，報了很多錯誤。

如

Cannot read property 'imports' of undefined"、

Failed to mount component: template or render function not defined.、

Cannot read property 'register' of undefined。

下面說一下正確的引用姿勢。

二、我的環(huán)境

Webpack + Vue-Cli 2.0 (vue init非simple的版本)

三、正文

1、確保你的quill富文本編輯器（不添加插件時）可以正常運行。

2、安裝NPM依賴。

cnpm install quill-image-drop-module -S

cnpm install quill-image-resize-module -S

3、在build文件夾下找到webpack.base.conf.js。

修改：

module.exports = {
 plugins: [
     new webpack.ProvidePlugin({
     // 在這兒添加下面兩行
       'window.Quill': 'quill/dist/quill.js',
       'Quill': 'quill/dist/quill.js'
    })
 ]
}

4、修改你在頁面引用的“quill富文本組件”。

修改<script>標(biāo)簽內(nèi)代碼：

  // 以前需要有下面幾行：
  import { quillEditor } from 'vue-quill-editor' //注意quillEditor必須加大括號，否則報錯。
  import "quill/dist/quill.core.css";//
  import "quill/dist/quill.snow.css";

  // 新增下面代碼：
  import resizeImage from 'quill-image-resize-module' // 調(diào)整大小組件。
  import { ImageDrop } from 'quill-image-drop-module'; // 拖動加載圖片組件。
  Quill.register('modules/imageDrop', ImageDrop);
  Quill.register('modules/resizeImage ', resizeImage )

然后，修改頁面引用的:options="editorOption"。

editorOption: {
 modules: {
 // 新增下面
 imageDrop: true, // 拖動加載圖片組件。
    imageResize: { //調(diào)整大小組件。
       displayStyles: {
         backgroundColor: 'black',
         border: 'none',
         color: 'white'
       },
       modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
     }
 }
}

重新 npm run dev ，插件運行成功！

以上這篇淺談vue中使用編輯器vue-quill-editor踩過的坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: