1.首先安裝vue-quill-editor
npm install vue-quill-editor --save
npm install quill --save? //安裝依賴
2.在根目錄的plugs目錄下新建vue-quill-editor.js,寫入以下內(nèi)容
import Vuefrom 'vue'
import VueQuillEditorfrom 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)
3.打開nuxt.config.js中引用vue-quill-editor.js以及vue-quill-editor的css樣式 并徘，完成插件的引用
css: [
? 'quill/dist/quill.snow.css',
? 'quill/dist/quill.bubble.css',
? 'quill/dist/quill.core.css',
],
plugins: [
? {src:'@/plugins/vue-quill-editor', ssr:false },
],
4.在你想使用富文本編輯器的頁(yè)面中寫入以下內(nèi)容学搜，有些功能想使用就可以把注釋去掉梁钾，官網(wǎng)入口
<template xmlns:v-quill='富文本編輯器'>
? <div class="container">
? ? <div class="quill-editor"
? ? ? ? :content="content"
? ? ? ? @change="onEditorChange($event)"
? ? ? ? @blur="onEditorBlur($event)"
? ? ? ? @focus="onEditorFocus($event)"
? ? ? ? @ready="onEditorReady($event)"
? ? ? ? v-quill:myQuillEditor="editorOption">
? export default {
data () {
return {
content:'<p>I am Example</p>',
? ? ? ? editorOption: {
// some quill options
? ? ? ? ? modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
// ["blockquote", "code-block"], // 引用? 代碼塊
[{header:1 }, {header:2 }], // 1、2 級(jí)標(biāo)題
// [{ list: "ordered" }, { list: "bullet" }], // 有序渴邦、無(wú)序列表
// [{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)
// [{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
// [{'direction': 'rtl'}],? ? ? ? ? ? ? ? ? ? ? ? // 文本方向
// [{ size: ["small", false, "large", "huge"] }], // 字體大小
// [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
// [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
// [{ font: [] }], // 字體種類
// [{ align: [] }], // 對(duì)齊方式
// ["clean"], // 清除文本格式
? ? ? ? ? ? ? ["link", "image", "video"]// 鏈接、圖片爬虱、視頻
? ? ? ? ? ? ]
}
}
}
},
? ? mounted() {
console.log('app init, my quill insrance object is:', this.myQuillEditor)
setTimeout(() => {
this.content ='i am changed'
? ? ? }, 3000)
},
? ? methods: {
onEditorBlur(editor) {
//失去焦點(diǎn)事件
? ? ? ? console.log('editor blur!', editor)
},
? ? ? onEditorFocus(editor) {
//獲得焦點(diǎn)事件
? ? ? ? console.log('editor focus!', editor)
},
? ? ? onEditorReady(editor) {
console.log('editor ready!', editor)
},
? ? ? onEditorChange({ editor, html, text }) {
//內(nèi)容改變事件
? ? ? ? console.log('editor change!', editor, html, text)
this.content = html
}
}
}
<style scoped>
? .container {
width:100%;
? ? max-width:700px;
? ? margin:0 auto;
? ? padding:30px 0;
? }
.quill-editor {
min-height:200px;
? ? overflow-y:auto;
? }
