太阳集团2018登录网址[主頁]欢迎您!

您好,
Are you ready

准备好开始了吗,
那就与我们取得联系吧

您希望我们为您提供什么服务呢

· · · ·

· · ·

您的预算
ueditor单独配置附件上传,并返回附件服务器源地址
发表人:太阳集团2018登录网址 | 2022-03-09

需要开发个上传视频的功能,在后端使用,如果使用成熟框架应该是比较简单的,如看别人用YII2框架开发的功能载图:

image.png

点击添加视屏按钮后出现上传加目录索引选择,如下图:

image.png

可是自己开发的个老后台框架UI,虽然比较老旧,但好在使用习惯了,所以按平时习惯就会用webuploader实现上传,但这样也不能很好的控制上传的资源。

后来想了想,百度的Ueditor编辑器上的附件功能也是挺好用的,可否拿来改装呢,然后查了百度比较多的相关资料,发觉用在自己框架上根本不通,也不知道是什么问题,所以花了点时间,最终实现了,先看效果图,添加视屏的界面,如下:

image.png

点击上传视频后的ueditor附件界面,如下:

image.png

可以浏览服务器资源,如下:

image.png

选择视频后,返回添加视频界面,如下:

image.png

视屏封面图是用webuploader插件上传不多说了,主要是上传视屏这是使用ueditor插件的附件上传实现的,因为本系统不需要用到附件上传的功能,所以直接把附件上传的参数也改了,是使用PHP版的,找到ueditor/php/config.json这个文件,直接把参数改了,只留了MP4格式上传,如下图:

image.png

添加视频界面关键代码:




上传视频

接下来JS代码:

var option = {

initialFrameHeight:100,

initialFrameWidth:660,

toolbars:[['attachment']],

autoHeightEnabled:false,//focus时自动清空初始化时的内容

autoClearinitialContent:true, //关闭字数统计

wordCount:false,

theme:'default', //关闭elementPath

elementPathEnabled:false

 }

//option参数有没有都关系不大

var editor_main = new baidu.editor.ui.Editor(option);

editor_main.render("news_main");

editor_main.ready(function () {

//editor_main.setDisabled();//查网上的资料大多把这项开启,亲测发现使用此项后是不能操作编辑器内容的

editor_main.hide();//把编辑器隐藏起来

editor_main.addListener('contentChange', function() {

 if(editor_main.getContent()!=""){

                //编辑器内容不能为空要添加,不然会出错,出错代码在后面贴出

 var pat=/

 var temp=editor_main.getContent().match(pat)[0].split('href="');

 var temp1=temp[1].split('"');

$("#news_vod_url").val(temp1[0]);

}

                //JS正则乱搞一通,就取到了mp4的服务器地址,当然也可以加上绝对地址的网址。

});

 });

//以下是上传按钮事件

$('#file_btn_main').click(function(){

editor_main.setContent('', false);//先清空编辑器原来的内容,这样才能保证编辑器最新的附件内容

var myFiles = editor_main.getDialog("attachment");

myFiles.open();

});

至此开发完成,在开发过程中遇到的几处坑点

第一、调用editor_main.setContent('', false);这个就出错,查了网上很久资料,大部分说是加个延时函数即可,然后跟踪了一下信息,其实是编辑器空数据造成的,加了 if(editor_main.getContent()!=""){}这条件语句之后就没有出错了。

第二、editor_main.setDisabled();这句设置绝对不能使用,使用后就无效了。

通过本次ueditor的附件改造功能后,大家可以举一反三,如图片的改造也基本可以使用本思路,不过ueditor的浏览目录文件时会比较卡顿。

本篇技术文章仅供采用比较老旧框架用,如果新手可以去学个比较多人使用的框架,不要去纠结什么框架好的问题,多人用的,能用起来的就是好的。

—— 太阳集团2018登录网址公众号 ——
十二年 行业积累

砥砺前行路上,有您关注,相聚相研共话成长!

如有意向,请与我们联系

办公电话:0774-3838278 / QQ:154727262 / 微信:wztmma