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 Timing
Apr 21 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
javascript常见操作汇总
Sep 03 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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修改指定文件后缀的方法
2014/09/11 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
学习python 之编写简单乘法运算题
2016/02/27 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python 读入多行数据的实例
2018/04/19 Python
浅析python参数的知识点
2018/12/10 Python
Python lambda表达式用法实例分析
2018/12/25 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python关闭占用端口方式
2019/12/17 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
出国导师推荐信
2014/01/16 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
思想品德自我评价
2014/02/04 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS