vue-quill-editorjavascript
Toolbar Module - Quillcss
vue-quill-image-uploadvue
1.在 package.json 中加入 "quill-image-extend-module": "^1.1.2" 依賴java
2.在編輯器組件中引入如下代碼webpack
<template>
<div class="in-editor-panel">
<quill-editor ref="quillEditor" v-model="content" :options="editorOption" @change="onChange">
</quill-editor>
</div>
</template>
<script type="text/ecmascript-6">
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
import { hasClass } from 'assets/scripts/dom/dom'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
props: {
value: {
type: String,
default: ''
},
toolbarMode: {
type: Number,
default: 0
},
placeholder: {
type: String,
default: '請輸入內容'
},
height: {
type: Number,
default: 170
},
imagePath: {
type: String,
default: ''
}
},
data () {
return {
content: '',
toolbars: [
[
['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]}],
[{'font': []}],
[{'color': []}, {'background': []}],
[{'align': []}],
['clean'],
['link', 'image', 'video']
],
[
['bold', 'italic', 'underline'],
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}],
[{'align': []}],
['link', 'image', 'video']
],
[
['bold', 'italic', 'underline'],
['blockquote', 'code-block'],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'color': []}, {'background': []}],
['insert']
]
],
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'image',
size: 2,
action: `/api/file/upload/image?filePath=${JSON.stringify(this.imagePath)}`,
response: (res) => {
return res.data
}
},
toolbar: {
container: [],
handlers: {
'image': function () {
QuillWatch.emit(this.quill.id)
}
}
}
},
placeholder: this.placeholder
}
}
},
computed: {
editor () {
return this.$refs.quillEditor.quill
}
},
watch: {
// 監聽父組件傳入的內容
value (newVal) {
this.$nextTick(() => {
this._listenerImage()
})
if (newVal === this.content) {
return false
}
// 傳入的內容不等於編輯器自身內容,則更新
this.content = newVal
},
'content' () {
this._listenerImage()
}
},
created () {
// 指定工具欄
this.editorOption.modules.toolbar.container = this.toolbars[this.toolbarMode]
},
mounted () {
// 設置編輯器高度
this.editor.container.style.height = `${this.height}px`
},
methods: {
// 顯示寬度修改框
_showWidthBox (event) {
// 獲取當前圖片對象
let currentImg = event.target
// 彈出寬度輸入框
this.$prompt('請輸入寬度', '提示', {
inputValue: currentImg.width,
confirmButtonText: '肯定',
cancelButtonText: '取消'
}).then(({value}) => {
// 賦值新寬度
currentImg.width = value
}).catch(() => {})
},
// 監聽圖片點擊
_listenerImage () {
// 獲取DOM對象
let editor = document.getElementsByClassName('ql-editor')[0]
let img = editor.getElementsByTagName('img')
// 非空驗證
if (img.length === 0) {
return
}
for (let i = 0; i < img.length; i++) {
let currentImg = img[i]
// 綁定且防止重複綁定
currentImg.removeEventListener('dblclick', this._showWidthBox, false)
currentImg.addEventListener('dblclick', this._showWidthBox, false)
}
},
onChange () {
// 告知父組件內容發生變化
this.$emit('input', this.content)
}
},
components: {
quillEditor
}
}
</script>
複製代碼
緣由是由於 uglifyjs 不支持ES6 (ES2015), 因此你須要在webpack uglify 以前, 把報錯的文件(或文件夾)用babel-loader 處理web
vue webpack template 有個 build/webpack.base.conf.js 文件json
這文件的有這一段var path = require('path')
var utils = require('./utils')
...
module.exports = {
...
module: {
...
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test')
]
},
複製代碼
這段表明的就是用 babel-loader 把 這些 include 的全部文件(和文件夾裏任何文件), 用babel-loader 處理, 你會發現你的src 也在這個 include 列組裏 (很容易理解,由於寫Vue, 就基本會用到 ES6 syntax)api
只須要吧這個插件的路徑加到下面就行(以下): bash
主要記住一個原理就是基本上任何與javascript syntax 有關的問題 (build 會報錯是哪一個文件, 並且通常都是在uglify 環節), 均可以放到這裏。指定先用babel-loader 轉換成最基礎的javascript 格式, 這樣通常後續環節都不會有javascript syntax 問題 (由於最基礎的javascript 格式總該都要支持吧)。服務器