甲方又整新需求了:富文本编辑器需要可以传视频。

layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了。

友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没了,也是很神秘。

因为上次咱们加了上传加了进度条,所以这回的上传也是有进度条的,只不过在富文本编辑区的外面。

上代码。

需要用编辑器的某个HTML的JS域:

var layeditIndex = layedit.build('intro', {
height: 600,
uploadImage: {
url: 'xxx'
},
uploadVideo: {
url: 'xxx',
exts: 'mp4',
xhr:xhrOnProgress,
progress:function(value){//上传进度回调 value进度值
element.progress('demo', value+'%')//设置页面进度条
console.log(value)
},
before: function(obj){
element.progress('demo', '0%')
$("#uploadLoadingDiv").show()
}
}
}); var xhrOnProgress=function(fun) {
console.log("xhrOnProgress")
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}

layedit.js:

...
var e = layui.$,
i = layui.layer,
a = layui.form,
l = (layui.hint(), layui.device()),
n = "layedit",
o = "layui-show",
r = "layui-disabled",
c = function() {
var t = this;
t.index = 0, t.config = {
tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "link", "unlink", "face", "image", "video"],
hideTool: [],
height: 280
}
};
...
image:function(){...}
video: function(a) {
var n = this;
layui.use("upload", function(o) {
var r = l.uploadVideo || {};
o.render({
url: r.url,
method: r.type,
exts:r.exts,
elem: e(n).find("input")[0],
xhr:r.xhr,
progress:r.progress,
before:r.before,
done: function(e) {
0 == e.code ? (e.data = e.data || {}, v.call(t, "video", {
src: e.data.src,
alt: e.data.title,
controls:"controls"
}, a)) : i.msg(e.msg || "上传失败")
}
})
})
},
code:function(){...}
...
C = {
html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>',
strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>',
italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>',
underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>',
del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>',
"|": '<span class="layedit-tool-mid"></span>',
left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>',
center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>',
right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>',
link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>',
unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>',
face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>',
image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>',
video: '<i class="layui-icon layedit-tool-image lt-video" title="视频" layedit-event="video"><input type="file" name="file"></i>',
code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>',
help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>'
},
...

以上。

layui 魔改:富文本编辑器添加上传视频功能的更多相关文章

  1. 给Django后台富文本编辑器添加上传文件的功能

    使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...

  2. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  3. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

  4. Kindeditor JS 富文本编辑器图片上传指定路径

    js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...

  5. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  6. Python3+Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)'''from seleni ...

  7. C# fckeditor添加上传附件功能

    最近在维护系统时,要把fckediotr加上上传附件功能,好久没有用fckeditor了,现在都已经改名字,不叫这个了. 修改统计器下面的fckconfig.js,方法如下: 1.把FCKConfig ...

  8. kindeditor富文本框,上传文件后,显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...

  9. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

随机推荐

  1. excel如何快速汇总多个类别的总和?

    这个需求是一位在当前抗疫一线的朋友提出的,和各位分享一下. 需求情况 因为众所周知的原因,他每天都需要为照顾的小区居民购买.运送生活物资.小区居民通过表单的形式提交自己每日的需求,最终汇总到一张exc ...

  2. HUD-Text插件使用方法

    插件的使用需要 1.HUDText PS:若存在在运行项目时出现了text(clone)而未有字体,点击该HUD的Text的Apply更新预制 由此可见,该插件时同过实例化预制的形式来实现打击浮字的 ...

  3. MyBatis入门学习-连接oracle实现CURD基本操作

    目录 前言 导入oracle库 配置 环境配置 配置引用 配置映射 查询 单条件查询 多条件查询 通过类字段传递参数 通过Map接口传参 Param注解 插入 更新 删除 字段映射 参考文献 前言 本 ...

  4. netty解决TCP的拆包和粘包的解决办法

    TCP粘包.拆包问题 熟悉tcp编程的可能知道,无论是服务端还是客户端,当我们读取或者发送数据的时候,都需要考虑TCP底层的粘包个拆包机制. tcp是一个“流”协议,所谓流就是没有界限的传输数据,在业 ...

  5. Spring和Springboot相关知识点整理

    简介 本文主要整理一些Spring & SpringBoot应用时和相关原理的知识点,对于源码不做没有深入的讲解. 1. 思维导图 右键新窗口打开可以放大. 说明 使用@Configurati ...

  6. ArrayList类的使用

    ArrayList常用类方法 (1)添加元素 public boolean add(E element) 在集合末端添加一个元素 public void add(int index,E element ...

  7. git和github入门指南(5)

    5.github上的标签 5.1.标签的作用 给当前版本打一个标签,在github上就会形成一个releases版本 点击进去后,用户就可以下载对应版本的源代码 5.2.在本地git工具上创建标签,同 ...

  8. Yolo车辆检测+LaneNet车道检测

    Yolo车辆检测+LaneNet车道检测 源代码:https://github.com/Dalaska/Driving-Scene-Understanding/blob/master/README.m ...

  9. java语言进阶(一)_Object类_常用API

    第一章 Object类 1.1 概述 java.lang.Object类是Java语言中的根类,即所有类的父类.它中描述的所有方法子类都可以使用.在对象实例化的时候,最终找的父类就是Object. 如 ...

  10. 构建者模式Builder创建对象

    构建者(Builder)设计模式(又叫生成器设计模式): 当一个类的内部数据过于复杂的时候(通常是负责持有数据的类,比如Config.VO.PO.Entity...),要创建的话可能就需要了解这个类的 ...