在工作中肯定会遇到使用富文本编辑器的时候
接下来我们就来一起学习一下 vue-quill-editor
注: 本项目是在vue的脚手架中搭建
1.下载
npm install vue-quill-editor --save
2.配置
1)在main.js中引入
import vueQuillEditor from ‘vue-quill-editor‘ // 引入富文本工具
2)在main.js中使用
Vue.use(vueQuillEditor)
3.创建vue文件
1)在页面添加quill-editor元素
<template>
<div>
<quill-editor>
</quill-editor>
</div>
</template>
2) 在项目中显示, 引入他
import vueQuillEditor from ‘./vueQuillEditor.vue‘
components: {
‘v-vueQuillEditor‘: vueQuillEditor
}
<v-vueQuillEditor></v-vueQuillEditor>
你也可为他添加css样式
4)想要获取输入的内容你可以绑定v-model 在加上个change时间
<quill-editor
class="quill"
v-model="progs"
@change="change">
</quill-editor>
5) 在js中这样写
export default {
data() {
return{
progs: ‘‘
}
},
methods: {
ssss: function () {
console.log(this.progs)
}
}
}
5) 这已经就可以使用了 简不简单
在使用的过程中我还遇到了图片上传的问题 和 汉化的问题 稍后我会吧代码上传