一、npm install vue-quill-editor
npm install quill
二、index.js引入
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)
三、components文件夹新建xx.vue
写法<template>
<!-- Or manually control the data synchronization(或手动控制数据流) -->
<div class="editor">
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<button @click="getContent()">获取内容</button>
</div>
</template>
<script>
import Quill from 'quill'
import { ImageImport } from '../../static/quill/ImageImport.js'
import { ImageResize } from '../../static/quill/ImageResize.js'
Quill.register('modules/imageImport', ImageImport)
Quill.register('modules/imageResize', ImageResize)
// You can also register quill modules in the component
export default {
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
modules: {
history: {
delay: 1000,
maxStack: 50,
userOnly: false
},
imageImport: true,
imageResize: {
displaySize: true
}
}
}
}
},
// if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
// 如果需要手动控制数据同步,父组件需要显式地处理changed事件
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
},
getContent () {
alert(this.content)
}
},
mounted () {
// you can use current editor object to do something(quill methods)
console.log('this is current quill instance object', this.editor)
}
}
</script>
其中imageImport和imageResize 需要从github(vue-quill-editor)中的modules 中下载下来
效果
转载于:https://my.oschina.net/u/2439541/blog/1511213