1.vue项目中,npm安装依赖
npm install vue-quill-editor --save
2.全局引用,项目入口文件中(main.js)注册
引入样式和注册
1 //导入富文本编辑器 2 import VueQuillEditor from 'vue-quill-editor' 3 //导入富文本编辑器对应得样式 4 import 'quill/dist/quill.core.css' // import styles 5 import 'quill/dist/quill.snow.css' // for snow theme 6 import 'quill/dist/quill.bubble.css' // for bubble theme
1 //将富文本编辑器,注册为全局可用得组件 2 Vue.use(VueQuillEditor)
3.使用富文本组件
1 <!-- 富文本编辑器 --> 2 <quill-editor v-model="addForm.goods_introduce"></quill-editor>
在<script>
//富文本-商品详情描述
goods_introduce: '',
</script>
推荐使用视频教程:
https://www.bilibili.com/video/BV1EE411B7SU?p=170
效果图片: