【Vue】quill-editor富文字編輯器元件的運用與修改配置使圖片上傳到伺服器
阿新 • • 發佈:2018-12-16
前言:Vue的生態已經越來越繁榮,越來越多有趣好用的元件加入的生態中了。quill-editor富文字編輯器就是很好用的元件之一。
一、quill-editor的安裝與使用
①、安裝
npm install vue-quill-editor --save
②、引用元件
<template> <div id="Test"> <quill-editor ref="myTextEditor" v-model="content"> </quill-editor> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '<h2>hello quill-editor</h2>', } } } </script> <style> </style>
像這樣quill-editor元件就引用成功了。
③、關於樣式亂了的問題
有許多朋友反映,像上面程式碼中引用quill-editor元件後,發現在頁面中富文字編輯器沒有樣式。
這樣情況應該是npm沒有安裝到quill.snow.css樣式檔案,可以用npm重新安裝下,或者直接放到靜態檔案中引用。
npm install quill.snow.css --save
import 'quill/dist/quill.snow.css'
或者
<style lang="scss"> @import "quill.snow.css"; </style>
二、修改配置,使圖片能夠上傳到伺服器
富文字編輯器中的圖片上傳是將圖片轉為base64格式的,如果需要上傳圖片到自己的伺服器,需要修改配置。
建立一個quill-config檔案
/*富文字編輯圖片上傳配置*/ const uploadConfig = { action: '', // 必填引數 圖片上傳地址 methods: 'POST', // 必填引數 圖片上傳方式 token: '', // 可選引數 如果需要token驗證,假設你的token有存放在sessionStorage name: 'img', // 必填引數 檔案的引數名 size: 500, // 可選引數 圖片大小,單位為Kb, 1M = 1024Kb accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可選 可上傳的圖片格式 }; // toolbar工具欄的工具選項(預設展示全部) const toolOptions = [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 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'] ]; const handlers = { image: function image() { var self = this; var fileInput = this.container.querySelector('input.ql-image[type=file]'); if (fileInput === null) { fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); // 設定圖片引數名 if (uploadConfig.name) { fileInput.setAttribute('name', uploadConfig.name); } // 可設定上傳圖片的格式 fileInput.setAttribute('accept', uploadConfig.accept); fileInput.classList.add('ql-image'); // 監聽選擇檔案 fileInput.addEventListener('change', function () { // 建立formData var formData = new FormData(); formData.append(uploadConfig.name, fileInput.files[0]); formData.append('object','product'); // 如果需要token且存在token if (uploadConfig.token) { formData.append('token', uploadConfig.token) } // 圖片上傳 var xhr = new XMLHttpRequest(); xhr.open(uploadConfig.methods, uploadConfig.action, true); // 上傳資料成功,會觸發 xhr.onload = function (e) { if (xhr.status === 200) { var res = JSON.parse(xhr.responseText); let length = self.quill.getSelection(true).index; //這裡很重要,你圖片上傳成功後,img的src需要在這裡新增,res.path就是你伺服器返回的圖片連結。 self.quill.insertEmbed(length, 'image', res.path); self.quill.setSelection(length + 1) } fileInput.value = '' }; // 開始上傳資料 xhr.upload.onloadstart = function (e) { fileInput.value = '' }; // 當發生網路異常的時候會觸發,如果上傳資料的過程還未結束 xhr.upload.onerror = function (e) { }; // 上傳資料完成(成功或者失敗)時會觸發 xhr.upload.onloadend = function (e) { // console.log('上傳結束') }; xhr.send(formData) }); this.container.appendChild(fileInput); } fileInput.click(); } }; export default { placeholder: '', theme: 'snow', // 主題 modules: { toolbar: { container: toolOptions, // 工具欄選項 handlers: handlers // 事件重寫 } } };
在組建中引用配置
<template>
<div id="Test">
<quill-editor ref="myTextEditor"
v-model="content" :options="quillOption">
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import quillConfig from './quill-config.js'
export default {
components: {
quillEditor
},
data () {
return {
content: '<h2>hello quill-editor</h2>',
quillOption: quillConfig,
}
}
}
</script>
<style>
</style>
像這樣就可以修改配置,使圖片上傳到伺服器了。