Nuxt生产模式下,mavon-ueditorr工具栏不显示图标?

这是《基于nuxt和iview搭建OM后台管理系统實践》这一个系列文章的目录大致思路如下:

  • 自行开发的公共组件(富文本、地图、上传)介绍
  • 项目上线流程,自动化打包(Jenkins)

上一篇簡要介绍了一下这个项目的项目背景从这一篇开始我会写开发公共组件的过程,这一篇讲解一下富文本编辑器quill的集成吧

如动图所示,為后台管理系统添加内容的功能页面可以看到已经集成了上传图片组件和富文本编辑器组件。

  • 组件原生图片上传是直接把图片处理成base64位嘚存储我这里为了存储方便,会把图片上传到七牛上这里也遇到了一点小坑。首先要禁用quill内部上传图片方法然后用一个隐藏的input[type=file]实现選择图片,然后模拟七牛表单提交不刷新的操作最终实现图片上传七牛(还得在前端应用一个库生成token),以上完整代码里有呈现
  • 编辑時需要传递content到子组件我这里用的ref

封装一个富文本组件,开始做之前以为会蛮容易的以为就引用一下就就可以了,没想到会遇到以上的那些坑最终在百度和翻阅github后很好的解决了问题,最终也封装完成也满足了需求后续我会找个时间剔除一些业务代码把组件放到github上。

我要回帖

更多关于 mavon 的文章

 

随机推荐