nuxt.js中使用vue-quill-editor富文本编辑器
1.安装npm install vue-quill-editor2.在plugins创建vue-quill-editorimport Vue from 'vue'import VueQuillEditor from 'vue-quill-editor/dist/ssr'Vue.use(VueQuillEditor)3.在nuxt.config.js引入相关文件css...
·
1.安装
npm install vue-quill-editor
2.在plugins创建vue-quill-editor
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)
3.在nuxt.config.js引入相关文件
css: [
'quill/dist/quill.snow.css',
'quill/dist/quill.bubble.css',
'quill/dist/quill.core.css'
],
plugins:[
{ src: "~plugins/vue-quill-editor.js", ssr: false },
]
4.使用举例
<template>
<section class="container">
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
v-quill:myQuillEditor="editorOption">
</div>
</section>
</template>
<script>
export default {
data () {
return {
content: '<p>I am Example</p>',
editorOption: {
// some quill options
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block']
]
}
}
}
},
mounted() {
console.log('app init, my quill insrance object is:', this.myQuillEditor)
setTimeout(() => {
this.content = 'i am changed'
}, 3000)
},
methods: {
onEditorBlur(editor) {
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({ editor, html, text }) {
console.log('editor change!', editor, html, text)
this.content = html
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 60%;
margin: 0 auto;
padding: 50px 0;
.quill-editor {
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
}
</style>
quill editor配置参考https://quilljs.com/docs/formats/
更多推荐
已为社区贡献18条内容
所有评论(0)