第一步，下载依赖
cnpm install vue-quill-editor --save
第二步，再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)
第三步，如果要上传图片到自己服务器的话如下
cnpm install vue-quill-editor-upload --save
接下来再组件中使用
//js布冯
import {quillRedefine} from 'vue-quill-editor-upload'
data(){
return{
editorOption: {
modules:{
toolbar:[
['image'],
[{ 'color': [] }, { 'background': [] }]
]
}
},
}
},
components: {quillRedefine},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(event){
console.log(event.html)
this.htmls = event.html
}, // 内容改变事件
},
created: function() {
let that = this;
that.upLoadUrl=upLoadUrl+'/?width=300';
that.editorOption = quillRedefine(
{
// 图片上传的设置
uploadConfig: {
action: that.upLoadUrl, // 必填参数 图片上传地址
// 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
console.log(respnse)
var path = respnse.path//这里return你的图片地址即可
return path
},
name: 'img' // 图片上传参数名
},
toolOptions: [
[{'color': []}, {'background': []}],
[ 'image']
]
}
)
}
temple里的代码是
<quill-editor
v-model="dataInfo.description"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
这样就可以正常操作了，注：上方的 upLoadUrl 需要根据你们的上传地址修改