C# Umeditor 编辑器上传本地视频、本地文件

最新推荐文章于 2024-09-20 11:19:01 发布
最新推荐文章于 2024-09-20 11:19:01 发布
阅读量1k 收藏
点赞数
分类专栏： Umeditor 文章标签： 编辑器 c# js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41533659/article/details/121381976
版权

Umeditor
最近在做一个网站，涉及到网站文章的编辑。Umeditor是一个很好的选择，但是看了一下Umeditor，发现不能上传本地视频和本地文件，而项目又要得比较急，所以以我觉得最快的方式修改了Umeditor.js。

效果展示

在这里插入图片描述
在这里插入图片描述

温馨提示：这个地方不要上传大视频

1、下载Umeditor相关文件

Umeditor下载
运行index.html。可以看见这时候不能上传本地视频
在这里插入图片描述

2、上传本地Video。

1、打开video.js。在这个地方后面添加以下代码
在这里插入图片描述

 '<table style="margin-bottom: 10px">' +
            '<tr><td>'+
            '<span style="font-weight: bold;margin-left: 6px;"><%=lang_video_upload%></span>' +
            '<input id="uploadVideo" style="margin-left: 5px;" type="file" hidefocus name="upVideo" accept="video/MP3,video/MP4,video/WEBM,video/MPEG,video/AVI,video/WMV,video/OGG,video/EVA,video/MOV"/>' +
            '</td></tr>' +
            '</table>' +

2、同时在video函数内添加以下代码
在这里插入图片描述
在这里插入图片描述

 videoOnChange() {
            var me = this;
            var objUrl = me.getObjectURL($('#uploadVideo')[0].files[0]); //获取video的路径
            if (objUrl) {
                me.upload();
            }
        },
        upload: function () {
            document.getElementById("videoMask").style.display = "block";

            var me = this;
            var href = me.getRootPath() + "/ForegroundArticle/uploadAllFile?Path=\\Upload\\ArticleFiles\\Video";//后台Controller上传文件的地址

            var videoVal = $('#uploadVideo')[0].files[0];
            var file = new FormData();
            file.append('file', videoVal);
            $.ajax({
                url: href,
                type: "post",
                data: file,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    document.getElementById("videoMask").style.display = "none";
                    var res = JSON.parse(data);
                    $("#eduiVideoUrl").val(res.data.src);
                    me.createPreviewVideo(res.data.src);
                }
            });
        },
        getRootPath: function () {
            var curWwwPath = window.document.location.href;
            var pathName = window.document.location.pathname;
            var pos = curWwwPath.indexOf(pathName);
            //获取主机地址，
            var localhostPaht = curWwwPath.substring(0, pos); 
            return localhostPaht;
        },
        getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        },
        getObjectType(file) {
            var type = "";
            if (file != null) {
                var typeSplit = file.type.split("/");
                if (typeSplit.length == 2) {
                    type = typeSplit[1].toLowerCase();
                }
            }
            return type;
        }

此处的getObjectType()和getObjectURL()是同样的方法，可以放在一个地方共用。我没有放一起而已。
3、后台Controller代码

/// <summary>
        /// 上传所有文件
        /// </summary>
        /// <param name="Path"></param>
        /// <returns></returns>
        public string uploadAllFile(string Path = "UpLoad\\")
        {
            Path = Path + "\\" + DateTime.Now.ToString("yyyy-MM-dd");//根据日期分类

            LayuiFileResult res = new LayuiFileResult();
            try
            {
                HttpPostedFileBase fileData = Request.Files[0];
                if (fileData != null && fileData.ContentLength > 0)
                {
                    string fileSavePath = Server.MapPath("~") + Path;
                    int size = fileData.ContentLength;
                    //获取文件的扩展名
                    string extName = System.IO.Path.GetExtension(fileData.FileName);
                    string universalUploadExts = ConfigurationManager.AppSettings["UniversalUpLoadExtension"].ToString();
                    var universalUploadList = universalUploadExts.Split(',').ToList();
                    string zipUpLoadExts = ConfigurationManager.AppSettings["ZipUpLoadExtension"].ToString();
                    var zipUpLoadList = zipUpLoadExts.Split(',').ToList();
                    string videoUpLoadExts = ConfigurationManager.AppSettings["VideoUpLoadExtension"].ToString();
                    var videoUpLoadList = videoUpLoadExts.Split(',').ToList();
                    string fileUpLoadExts = ConfigurationManager.AppSettings["FileUpLoadExtension"].ToString();
                    var fileUpLoadList = fileUpLoadExts.Split(',').ToList();
                    universalUploadList.AddRange(zipUpLoadList);
                    universalUploadList.AddRange(videoUpLoadList);
                    universalUploadList.AddRange(fileUpLoadList);
                    universalUploadList.ForEach(i => i.ToLower());
                    if (!universalUploadList.Contains(extName.ToLower()))
                    {
                        res.code = -1;
                        res.msg = "上传失败，不支持该格式文件！";
                    }
                    else
                    {
                        //得到一个新文件的名称
                        string newName = Guid.NewGuid().ToString() + extName;
                        //如果文件目录不存在 创建目录
                        if (!System.IO.Directory.Exists(fileSavePath))
                        {
                            System.IO.Directory.CreateDirectory(fileSavePath);
                        }
                        //服务器保存文件
                        string path = System.IO.Path.Combine(fileSavePath, newName);
                        fileData.SaveAs(path);
                        List<string> FilsDicNames = Path.Split('\\').Where(i => !string.IsNullOrEmpty(i)).ToList();
                        foreach (var item in FilsDicNames)
                        {
                            res.data.src = res.data.src + ("/" + item);
                        }
                        res.data.src = res.data.src + "/" + newName;
                        res.data.FileName = fileData.FileName;
                    }
                }
            }
            catch (Exception ex)
            {
                res.code = -1;
                res.msg = ex.Message;
                Logger.Write(typeof(DefaultController), "DefaultController：uploadAllFile" + ex.Message);
            }
            return JsonConvert.SerializeObject(res);
        }

4、LayuiFileResult：上传文件的返回值

//上传文件的返回值
    public class LayuiFileResult
    {
        public int code { get; set; } = 1;
        public string msg { get; set; } = "成功";
        public FileInfo data { get; set; } = new FileInfo();
    }

到此，可以上传本地视频。
解决百度umeditor 无法插入.MP4 .avi 视频格式的问题

3、上传本地附件

1、打开zh-cn.js。添加以下代码
在这里插入图片描述
2、打开Umeditor.js，添加以下代码：
在这里插入图片描述
在这里插入图片描述
在createUI中添加以下代码：
在这里插入图片描述


                //附件上传隐藏框
                var upID = "#uploadFile_" + id.replace("#", "");
                if ($(upID).length == 0) {
                    var $upFile = $('<input id=' + (upID.replace("#", "")) + ' style="display:none" type="file"/>');
                    $upFile.insertBefore($container);

                    $(upID).on("change", function () {
                        var objUrl = getObjectURL($(upID)[0].files[0]);
                        if (objUrl) {
                            uploadFile(editor);
                        }
                    });
                }

在这里插入图片描述


    //文件上传相关---开始
    UM.registerUI('upFile', function (name) {
        var me = this;
        var upID = "#uploadFile_" + me.$body.selector.replace("#","");
        var $btn = $.eduibutton({
            icon: name,
            click: function () {
                setTimeout(function () {
                    $(upID).click();
                }, 500);
            },
            title: '附件上传'
        });
        this.addListener('selectionchange', function () {
            //切换为不可编辑时，把自己变灰
            var state = this.queryCommandState(name);
            $btn.edui().disabled(state == -1).active(state == 1)
        });
        return $btn;
    });
    function uploadFile(me) {
        var upID = "#uploadFile_" + me.id.replace("#", "");
        var href = getRootPath() + "/ForegroundArticle/uploadAllFile?Path=\\Upload\\ArticleFiles\\Files";
        var fileVal = $(upID)[0].files[0];
        var file = new FormData();
        file.append('file', fileVal);
        $.ajax({
            url: href,
            type: "post",
            data: file,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                var res = JSON.parse(data);
                var innerHtml = "<a href=\"" + res.data.src + "\" target=\"_self\" >" + res.data.FileName + "</a>";
                UM.getEditor(me.id).execCommand('inserthtml', innerHtml);
            }
        });
    }
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    function getRootPath() {
        var curWwwPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //获取主机地址，
        var localhostPaht = curWwwPath.substring(0, pos);
        return localhostPaht;
    }
    //文件上传相关--结束

到此，便可以上传附件了

喜欢看剧的小菇凉
关注
专栏目录
怎样在百度UMeditor编辑器中插入腾讯和爱奇艺网站视频？
t595981879的博客
09-25 1935
百度UMeditor在线编辑器有插入视频的功能，但是默认只支持优酷网的视频智能分析提取，其它视频站是不支持的，但是同样也可以插入。 原理很简单，就是复制腾讯、爱奇艺等视频的FLASH地址即可。 在百度UMeditor在线编辑器插入腾讯、爱奇艺等视频的FLASH地址时，会提示"输入的视频地址有误，请检查后再试！"，不用管它。或者你直接修改它的zh-cn.js文件中的这段提示。 1、在哪插入视频...
ueditor完整实例jsp版（可上传图片、视频、文件）
08-12
MyEclipse工程，整合UE1.4.3jsp版，可以上传图片、文件、视频 无错误版
C#上传大型视频文件到服务器,解决方案
最新发布
weixin_52041354的博客
09-20 1422
前端：vue2,vue3,vue-cli,html,jquery后端：asp.net,.net core数据库：SQL Server,MySQL,Oracle,达梦,人大金仓,国产数据库功能：大文件上传下载，断点续传，文件夹上传下载，加密传输，加密存储，云对象存储该说不说，最近这块挻火的，今天早上又有网友加我微信，实际上我的微信号之前就已经在网上公开了，但是很多网友还是说找不到，这个就真没办法了。
ueditor视频上传及预览和播放
u014014256的博客
05-14 7222
百度编辑器目前来讲是运用比较广泛的一个编辑器了，不仅开源还有中文的文档，所以很受欢迎，不过里面也有许多地方需要开发人员自己调试，其中一个比较常见的问题就是上传视频了，上传视频本身有一些小bug，这个基本最大的体现就是编辑器内无法预览上传的视频问题。 我搜集了网上的解决方案，发现基本都一样，大多数都是复制黏贴的答案，虽说一定程度解决了编辑器上传不显示的问题，但却造成了新的bug，例如上传视频框无法关闭，还有只要等切换源码模式再返回来又看不到预览的视频了等。 所以最后还是自己动手丰衣足食，最后终于找到了完美
ueditor上传视频
熊诗言的博客
03-05 245
https://blog.csdn.net/Love666Code/article/details/79977556 https://www.cnblogs.com/dhrwawa/p/10600193.html 另外一般项目中可能会进行xss过滤，所以要放开video标签和source标签
使用百度ueditor实现图片上传和视频上传（自定义路径）
weixin_42715209的博客
04-04 2438
前一阵子开发了一个信息发布的系统，其中发布模块就涉及到了发布信息的编辑，尤其是其中的图片上传和视频上传功能。查阅了很多资料，有需要改jar包的，有需要各种配置的，一路看下来，不是很方便和很清晰。所有写了这篇，一方面是自己记录下，二是给有需要的人参考一下。进入主题，首先我们去到ueditor的官网，下载最新版的。（自己用的是jsp的utf-8版） u...
百度ueditor上传视频
2012
04-18 697
修改ueditor/jsp/config.json文件，如下图上传后，src无法回显修改ueditor.all.js,第17769行，html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));改为html.push(creatInsertStr( vi.url,...
C# 将本地视频文件转换成RTSP视频流
11-10
在IT领域，尤其是在多媒体处理和网络流媒体技术中，"C#将本地视频文件转换成RTSP视频流"是一个常见的需求。RTSP（Real-Time Streaming Protocol）是一种用于控制音视频流传输的协议，广泛应用于远程监控、在线直播等...
C#开发的在线或本地视频转码成ts或其他文件代码
08-01
本项目是关于使用C#进行在线或本地视频转码为TS（Transport Stream）或者其他格式的文件。下面我们将深入探讨这个主题。 首先，C#结合FFmpeg，一个开源的跨平台多媒体处理框架，可以实现视频转码。FFmpeg支持多种...
wangEditor3上传本地视频
11-12
//上传视频 editor.customConfig.customUploadVideo = function (files, obj) { var date = new FormData(); date.append("file", files[0]); $.ajax({ type: "POST", url: "../../import/upload", data: ...
C# FFmpeg保存rtsp视频流到本地文件
11-15
本教程将深入讲解如何使用C#结合FFmpeg库来保存RTSP视频流到本地文件。 首先，我们需要理解RTSP（Real-Time Streaming Protocol）的基本概念。RTSP是一种应用层协议，用于控制媒体数据的传输，通常用于IP网络上的...
UEditor例子，图片上传+视频上传
08-14
UEditor富文本编辑器，修改源码，上传图片到oss服务器+上传视频到阿里云vod转码。
百度富文本框Ueditor C#实现样例
06-02
只需要修改congfig.js文件和net文件夹中imageUP.ashx文件中的上传目录，即可实现上传图片
视频上传与本地视频文件播放
01-05
视频上传与本地视频文件播放 上传任何格式的视频，在网页列表播放
baidu编辑器 ueditor umeditor demo实例源码
11-07
baudu编辑器 editor和umeditor版本的使用demo，包括初始化控件 控件取值 以及自定义工具栏。下载的编辑器源码已经改过生成成功。
c#通过url下载到本地文件.txt
08-30
C# 通过文件url 下载 文件,只是最简单的方法。其实要写一个下载的方法是要很复杂的过程的。可以自定义文件保存地址文件夹，图片 文档表格应该都有可以改个后缀就好
php使用百度富文本编辑器UEDITOR上传视频和音频
weixin_36667844的博客
01-30 1088
整合百度ue富文本和php，实现视频和音频上传
解决百度umeditor 无法插入.MP4 .avi 视频格式的问题。
qq_15801963的博客
09-20 5304
  使用百度ueditor编辑器插入视频，发现有些视频能正常插入，有些显示 “输入的视频地址有误，请检查后再试！”，在浏览器直接播放这些视频，发现都是可以播放的，那么狠显然问题出在ueditor了  本着不服输的精神，在ueditor源码全局查找，发现之所以出现这个提示，是因为百度ueditor限制了视频链接后缀， 进入umeditor/video/video.js 大概在100行左右，有...
使用百度富文本编辑器(UEditor )进行上传
JCoder的博客
07-02 1492
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
C#利用Geckofx技术打开本地HTML文件操作实例
资源摘要信息:"在本示例中，我们将讨论如何使用C#结合Geckofx库来打开本地HTML文件。首先，我们先简要介绍一下Geckofx以及它的主要功能，然后详细说明如何在C#项目中实现打开本地HTML文件的操作，并且会提供相关的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值