本文共 988 字，大约阅读时间需要 3 分钟。

1、在main.js中对富文本编辑器进行安装与注册

// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// require styles 导入富文本编辑器对应的样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'

// 将富文本编辑器，注册为全局可用的组件Vue.use(VueQuillEditor, /* { default global options } */)

2、使用

之前我们已经注册好了富文本编辑器组件，下面就是具体使用了，直接使用quill-editor标签即可，然后我们首先进行一下数据字段的双向绑定，如下：

查看我们界面，发现已经出现了一个简单的富文本编辑器

                   
                    
                    
                    
    
     添加商品
                
   

script处理逻辑处

// 点击添加商品按钮触发的事件        addGoods(){
               console.log(this.addForm)        }

style样式

.btAdd{
       margin-top: 15px;}.ql-editor{
       min-height: 300px;}

最后，我们就会发现富文本编辑器最小高度比较合适并且添加了一个按钮

点击添加商品按钮，我们能够发现控制台打印了一个关于输入内容的P标签

3、结束语

至此，我们的功能就完成了！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/104075534 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！