百度搜一下“VUE 富文本編輯器”夯到，五花八門弧腥，N多種张抄，推薦比較多的是集成百度的UEditor,然后是vue-quill-editor孤页。后者是專門為vue提供的丛晦，結(jié)合起來更順手奕纫。試了試UEditor，然后放棄了烫沙，雖然功能豐富匹层，但是確實(shí)略麻煩。vue-quill-editor簡單輕巧又開源锌蓄，可自己隨意訂制升筏，因此選了后者。下面簡單說一下怎么使用瘸爽。
先上最終效果您访，如圖：
默認(rèn)樣式
圖片裁剪
1、組件編寫
1.Quilleditor組件
在components/common下創(chuàng)建Quilleditor.vue剪决，主要代碼如下：
<template>
<div>
<quill-editor v-model="content"
ref="myTextEditor"
:options="editorOption"
@change="onChange"
style="width: 80%;height: 500px;padding-left: 10%;padding-right: 10%"
>
<div id="toolbar" slot="toolbar">
<span class="ql-formats"><button type="button" class="ql-bold"></button></span>
<span class="ql-formats"><button type="button" class="ql-italic"></button></span>
<span class="ql-formats"><button type="button" class="ql-underline"></button></span>
<span class="ql-formats"><button type="button" class="ql-strike"></button></span>
<span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
<span class="ql-formats"><button type="button" class="ql-code-block"></button></span>
<span class="ql-formats"><button type="button" class="ql-header" value="1"></button></span>
<span class="ql-formats"><button type="button" class="ql-header" value="2"></button></span>
<span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
<span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
<span class="ql-formats"><button type="button" class="ql-script" value="sub"></button></span>
<span class="ql-formats"><button type="button" class="ql-script" value="super"></button></span>
<span class="ql-formats"><button type="button" class="ql-indent" value="-1"></button></span>
<span class="ql-formats"><button type="button" class="ql-indent" value="+1"></button></span>
<span class="ql-formats"> <button type="button" class="ql-direction" value="rtl"></button></span>
<span class="ql-formats">
<select class="ql-size">
<option value="small"></option>
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
</span>
<span class="ql-formats">
<select class="ql-header">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option selected="selected"></option>
</select>
</span>
<span class="ql-formats"><select class="ql-color">
<option selected="selected"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
<option value="#ffff00"></option>
<option value="#008a00"></option>
<option value="#0066cc"></option>
<option value="#9933ff"></option>
<option value="#ffffff"></option>
<option value="#facccc"></option>
<option value="#ffebcc"></option>
<option value="#ffffcc"></option>
<option value="#cce8cc"></option>
<option value="#cce0f5"></option>
<option value="#ebd6ff"></option>
<option value="#bbbbbb"></option>
<option value="#f06666"></option>
<option value="#ffc266"></option>
<option value="#ffff66"></option>
<option value="#66b966"></option>
<option value="#66a3e0"></option>
<option value="#c285ff"></option>
<option value="#888888"></option>
<option value="#a10000"></option>
<option value="#b26b00"></option>
<option value="#b2b200"></option>
<option value="#006100"></option>
<option value="#0047b2"></option>
<option value="#6b24b2"></option>
<option value="#444444"></option>
<option value="#5c0000"></option>
<option value="#663d00"></option>
<option value="#666600"></option>
<option value="#003700"></option>
<option value="#002966"></option>
<option value="#3d1466"></option>
</select></span>
<span class="ql-formats"> <select class="ql-background">
<option value="#000000"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
<option value="#ffff00"></option>
<option value="#008a00"></option>
<option value="#0066cc"></option>
<option value="#9933ff"></option>
<option selected="selected"></option>
<option value="#facccc"></option>
<option value="#ffebcc"></option>
<option value="#ffffcc"></option>
<option value="#cce8cc"></option>
<option value="#cce0f5"></option>
<option value="#ebd6ff"></option>
<option value="#bbbbbb"></option>
<option value="#f06666"></option>
<option value="#ffc266"></option>
<option value="#ffff66"></option>
<option value="#66b966"></option>
<option value="#66a3e0"></option>
<option value="#c285ff"></option>
<option value="#888888"></option>
<option value="#a10000"></option>
<option value="#b26b00"></option>
<option value="#b2b200"></option>
<option value="#006100"></option>
<option value="#0047b2"></option>
<option value="#6b24b2"></option>
<option value="#444444"></option>
<option value="#5c0000"></option>
<option value="#663d00"></option>
<option value="#666600"></option>
<option value="#003700"></option>
<option value="#002966"></option>
<option value="#3d1466"></option>
</select></span>
<span class="ql-formats"><select class="ql-font">
<option selected="selected"></option>
<option value="serif"></option>
<option value="monospace"></option>
</select></span>
<span class="ql-formats">
<select class="ql-align">
<option selected="selected"></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
<span class="ql-formats">
<button type="button" class="ql-clean"></button>
</span>
<span class="ql-formats">
<button type="button" class="ql-link"></button>
</span>
<span class="ql-formats">
<button type="button" @click="imgClick">
<svg viewBox="0 0 18 18">
<rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
<circle class="ql-fill" cx="6" cy="7" r="1"></circle>
<polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
</svg>
</button>
</span>
<span class="ql-formats">
<button type="button" class="ql-video"></button>
</span>
</div>
</quill-editor>
<crop-upload
v-model="showCrop"
:width="width"
:height="height"
:fileName="fileName"
:uploadUrl="uploadUrl"
@uploadSuccess="onUploadSuccess"
></crop-upload>
</div>
</template>
<script>
/* eslint-disable spaced-comment */
import { quillEditor } from 'vue-quill-editor'
import CropUpload from './CropUpload'
export default {
props: {
/*編輯器的內(nèi)容*/
value: {
type: String
},
/*上傳圖片的地址*/
uploadUrl: {
type: String
},
/*上傳圖片的file控件name*/
fileName: {
type: String
},
/*圖片大小*/
maxSize: {
type: Number,
default: 400//kb
},
/*使用使用裁切*/
canCrop: {
type: Boolean,
default: false
},
/*裁切的最小尺寸*/
width: {
type: Number,
default: 200
},
/*裁切的最小尺寸*/
height: {
type: Number,
default: 200
}
},
data () {
return {
content: '',
editorOption: {
modules: {
toolbar: '#toolbar'
}
},
/*顯示裁切控件*/
showCrop: false
}
},
methods: {
onChange () {
this.$emit('input', this.content)
},
/*選擇上傳圖片切換*/
onFileChange (e) {
var fileInput = e.target
if (fileInput.files.length === 0) {
return
}
if (fileInput.files[0].size > 1024 * 1024 * this.maxSize) {
alert('圖片過大')
return
}
if (!this.uploadUrl) {
console.log('no editor uploadUrl')
return
}
var self = this
var data = new FormData
data.append(this.fileName, fileInput.files[0])
this.editor.focus()
var xhr = new XMLHttpRequest()
xhr.open('post', this.uploadUrl)
xhr.responseType = 'json'
xhr.send(data)
xhr.onload = function () {
if (xhr.status === 200) {
self.editor.insertEmbed(self.editor.getSelection().index, 'image', xhr.response.url)
}
}
},
/*裁切上傳成功 res根據(jù)上傳接口值獲取*/
onUploadSuccess: function (res) {
this.editor.focus()
this.editor.insertEmbed(this.editor.getSelection().index, 'image', res.url)
},
/*點(diǎn)擊上傳圖片按鈕*/
imgClick () {
if (this.canCrop) {
this.showCrop = true
} else {
/*創(chuàng)建input file 不裁切灵汪，自己控制*/
var input = document.createElement('input')
input.type = 'file'
input.name = this.fileName
input.accept = 'image/jpeg,image/png,image/jpg,image/gif'
input.onchange = this.onFileChange
input.click()
}
}
},
computed: {
editor () {
return this.$refs.myTextEditor.quill
}
},
components: {
quillEditor,
CropUpload
},
mounted () {
this.content = this.value
},
watch: {
'value' (newVal, oldVal) {
if (this.editor) {
if (newVal !== this.content) {
this.content = newVal
}
}
}
}
}
</script>
2.CropUpload組件--圖片裁剪
<template>
<vue-crop @crop-upload-success="uploadSuccess"
v-model="show"
:width="width"
:height="height"
:url="uploadUrl"
:field="fileName"
img-format="png"></vue-crop>
</template>
<script>
import VueCrop from 'vue-image-crop-upload'
export default {
props: {
value: {
type: Boolean
},
width: {
type: Number,
default: 200
},
height: {
type: Number,
default: 200
},
uploadUrl: {
type: String
},
fileName: {
type: String
},
},
data () {
return {
show: false,
}
},
mounted () {
this.show = this.value
},
components: {
VueCrop
},
methods: {
uploadSuccess (res, field) {
this.$emit('uploadSuccess', res)
},
},
watch: {
value (newv) {
this.show = newv
},
show (newv) {
if (!this.show){
this.$emit('input', false)
}
}
}
}
</script>
<style>
</style>
2、插件js編寫
- 在plugins下創(chuàng)建nuxt-quill-plugin.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/ssr')
Vue.use(VueQuillEditor)
}
- 然后在nuxt.config.js中引入該插件
plugins: ['~plugins/element-ui',
{src: '~plugins/nuxt-quill-plugin.js', ssr: false}]
所有配置完以后柑潦，你會(huì)發(fā)現(xiàn)出現(xiàn)的效果有可能如下：
window is not defined
這坑爹玩意享言，是因?yàn)閚uxt默認(rèn)首頁服務(wù)端渲染，其他頁面客戶端渲染渗鬼，而window對(duì)象只在客戶端存在担锤，因此最好不要讓帶富文本的頁面出現(xiàn)在首頁使用。當(dāng)然這不是終極解決辦法乍钻，不過vue-quill-editor同樣支持服務(wù)端渲染肛循，稍候再做研究铭腕。
