npm install vue-quill-editor --save2、新建plugins/vue-quill-editor.js文件import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor);
3、配置nuxt.config.jsmodule.exports = {
// other config
// ...
// import css files as global style
css: [
'quill/dist/quill.snow.css',
'quill/dist/quill.bubble.css',
'quill/dist/quill.core.css'
],
plugins: [
// other plugins
{
src: '~/plugins/vue-quill-editor',
ssr: false
}
]
}
4、组件中使用<template>
<div>
<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>
<div class="editor-uploader">
<input type="file" accept="image/*" @change="onUploadHandler"/>
</div>
</div>
</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'], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ direction: 'rtl' }], // 文本方向
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: ['songti'] }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['image', 'video'] // 链接、图片、视频
],
handlers: {
'image': function (value) {
if (value) { // value === true
document.querySelector('.editor-uploader input').click()
}
}
}
}
}
}
},
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
},
// 编辑器上传图片
async onUploadHandler(e) {
var file = e.target.files[0]
var _this = this
var param = new Object()
param.type=conf.fileType.editImage
param.obj_id=this.id
conf.upfileCallback(this.$axios,file,qiniu,param,(res)=>{
const imageUrl = conf.qiniuHost+res.key
// 获取光标所在位置
let quill = _this.myQuillEditor
let length = quill.getSelection().index
// 插入图片
quill.insertEmbed(length, 'image', imageUrl)
// // 调整光标到最后
quill.setSelection(length + 1)
})
},
}
}
</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>