从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章将为大家详细讲解有关怎么在vue项目中使用ueditor自定义一个上传按钮功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
首先是给ueditor添加自定义按钮:
1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love"
ueditor.all.js
2,给按钮添加事件
还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,如下:
给按钮添加事件
我这里绑定的事件在vue里面已经定义好了 这里用$emit 绑定上去,然后在页面里面监听。bus是自定义的vue实例,因为整个项目是结合vue在使用。
3.给按钮添加图标icon
打开themes/default/css/ueditor.css.在文件下面添加即可,如下:
.edui-default .edui-toolbar .edui-for-love .edui-icon { background: url(../images/video.png) no-repeat 50% 50%; }
这里的.edui-for-love后面的love就是刚才定义按钮的名称,由于我所有按钮都重写样式了,所以全部采用覆盖了;
给按钮添加图标
4. 页面监听点击事件
这里的内容就是vue的基础了,可以自己看文档,简单如下
先给页面定义一个元素添加绑定事件
然后监听ueditor传递过来的点击事件showUpload
在methods里面定义showUpload事件(这里命名重复了 无所谓)
这样 ,自定义上传按钮已经完成了。
下面给大家介绍vue项目中使用ueditor的例子
以vue-cli生成的项目为例
1.static文件夹下先放入ueditor文件
2.index.html添加如下代码
3.webpack.base.conf.js添加如下配置
externals: { 'UE': 'UE', },
4.index.html中添加
5.editor组件
获取
关于怎么在vue项目中使用ueditor自定义一个上传按钮功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图