1.安装,最好使用npm安装,速度慢点,比cnpm稳定
npm install vue-quill-editor –save
2.在main.js中导入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
3.新建Editor.vue文件
<template>
<quill-editor class="editor"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
name: "Editor",
data() {
return {
content:null,
editorOption:{}
};
},
methods:{
onEditorBlur(){
},
onEditorFocus(){//获得焦点事件
},
onEditorChange(){//内容改变事件
}
}
</script>
<style>
这里可以自定义样式以及安放的位置
</style>
4.在vue文件中引用
5.可选项,优化图片上传
安装模块
npm install quill-image-extend-module --save-dev
vue文件示例
<template>
<div class="quill-wrap">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
</div>
</template>
<script>
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
components: {quillEditor},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'img',
action: updateUrl,
response: (res) => {
return res.info
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
QuillWatch.emit(this.quill.id)
}
}
}
}
}
}
}
}
</script>
6.如何加超链接
先选中文字再点超链接标志,这个功能有点不稳定,添加两个超链接,点save保存,后面那个会失效。
解决方案:从其他地方编辑好,复制过来。
7.效果图