(1)安装vue-quill-editor
cnpm install vue-quill-editor --save
或
npm install vue-quill-editor --save
(2)plugins下创建nuxt-quill-plugin.js
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)
(3)修改nuxt.config.js ,配置插件和样式
plugins: [
{ src: '~plugins/nuxt-quill-plugin.js', ssr: false }
],
// some nuxt config...
css: [
'quill/dist/quill.snow.css',
'quill/dist/quill.bubble.css',
'quill/dist/quill.core.css'
],
(4)pages/spit/submit.vue
<template>
<div class="wrapper release-tc">
<div class="release-box">
<h3>发布博客</h3>
<div class="editor">
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
v-quill:myQuillEditor="editorOption">
</div>
</div>
<div class="btn">
<button class="sui-btn btn-danger btn-release" @click="save">发布</button>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</template>
<script>
import '~/assets/css/page-sj-spit-submit.css'//html本身样式
export default {
data() {
return {
content: '',//富文本中数据
editorOption: {
// 富文本中的一些属性
modules: {
toolbar: [
[{'size': ['small', false, 'large']}],
['bold', 'italic'],
[{'list': 'ordered'}, {'list': 'bullet'}],
['link', 'image'],
['blockquote', 'code-block']
]
}
}
}
},
mounted() {
console.log('app init, my quill insrance object is:', this.myQuillEditor)
/*setTimeout(() => {
this.content = 'i am changed'
}, 3000)*/
},
methods: {
onEditorChange({ editor, html, text }) {//内容改变事件
console.log('editor change!', editor, html, text)
this.content = html
},
onEditorBlur(editor) {//失去焦点事件
console.log('editor blur!', editor)
},
onEditorFocus(editor) {//获得焦点事件
console.log('editor focus!', editor)
},
onEditorReady(editor) {//准备编辑器
console.log('editor ready!', editor)
},
save(){//提交
//....
}
}
}
</script>
<style>
.quill-editor {
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
</style>