vue项目中应用ueditor自定义上传按钮功能


Posted in Javascript onApril 27, 2018

由于上传地址问题,需要自定义上传按钮,效果如图

vue项目中应用ueditor自定义上传按钮功能

由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。

首先是给ueditor添加自定义按钮:

1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love"

vue项目中应用ueditor自定义上传按钮功能

ueditor.all.js

2,给按钮添加事件

还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,如下:

vue项目中应用ueditor自定义上传按钮功能

给按钮添加事件

我这里绑定的事件在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就是刚才定义按钮的名称,由于我所有按钮都重写样式了,所以全部采用覆盖了;

vue项目中应用ueditor自定义上传按钮功能

给按钮添加图标

4. 页面监听点击事件

这里的内容就是vue的基础了,可以自己看文档,简单如下

vue项目中应用ueditor自定义上传按钮功能

先给页面定义一个元素添加绑定事件

vue项目中应用ueditor自定义上传按钮功能

然后监听ueditor传递过来的点击事件showUpload

vue项目中应用ueditor自定义上传按钮功能

在methods里面定义showUpload事件(这里命名重复了 无所谓)

这样 ,自定义上传按钮已经完成了。

下面给大家介绍vue项目中使用ueditor的例子

以vue-cli生成的项目为例

1.static文件夹下先放入ueditor文件

2.index.html添加如下代码

<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>

3.webpack.base.conf.js添加如下配置

externals: {
  'UE': 'UE',
 },

4.index.html中添加

<script type="text/javascript">
 window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路径设定为UEditor所放的位置
</script>

5.editor组件

<template>
 <div>
  <mt-button @click="geteditor()" type="danger">获取</mt-button>
  <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
 </div>
</template>
<script>
const UE = require('UE');// eslint-disable-line
export default {
 name: 'editorView',
 data: () => (
  {
   editor: null,
  }
 ),
 methods: {
  geteditor() {
   console.log(this.editor.getContent());
  },
 },
 mounted() {
  this.editor = UE.getEditor('editor');
 },
 destroyed() {
  this.editor.destroy();
 },
};
</script>
<style>
</style>

总结

以上所述是小编给大家介绍的vue项目中应用ueditor自定义上传按钮功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
javascript事件冒泡实例分析
May 13 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
js实现简单的验证码
Dec 25 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 #Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 #Javascript
Node.js文件编码格式的转换的方法
Apr 27 #Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
基于Vue实现拖拽效果
Apr 27 #Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 #Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 #Javascript
You might like
PHP之短标签开启设置
2013/06/17 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP钩子实现方法解析
2019/05/21 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
原生javascript获取元素样式
2014/12/31 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
python中hashlib模块用法示例
2017/10/30 Python
python画折线图的程序
2018/07/26 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
数学系个人求职信范文
2014/01/30 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
爱的教育观后感
2015/06/17 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
2019假期福利管理制度!
2019/07/15 职场文书