关于FineUI core 使用UEditor的一些踩坑之路 二

上一篇文章主要介绍Core 怎么使用UEditor的图片元素等上传功能。但是UEditor的坑还远没有结束。

本篇文章我主要描述下在应用中所遇到的问题。

问题一:

项目后台用UEditor编辑所要展示的内容,并将带html样式的内容保存进数据库中。然后前台通过Ajax读取接口的方式将所编辑的内容展示出来。那么问题来了,由于后台和前台是分开的两套程序,UEditor只是在后台的文件中进行上传操作,那么前台怎么去读取保存进数据库里带html样式的内容信息呢?显然直接读取是行不通的。因为前台项目中根本就读不到后台我设置的upload路径。


解决思路:

我首先想到的是将图片上传到一个公共路径里,让前后台读取的路径一致,这样就能解决问题。但实际情况并不乐观,可能是我没仔细去研究UEditor的结构,我只要一改路径,那么各种错误就接踵而至。由于工期的问题,我直接放弃了这个念头。(网上也有一定的帖子关于修改上传路径的解决思路,我没有仔细去看。有兴趣的可以去研究一下。)

既然这个路一时半会没办法走,我就得换个思路了。直接截取字符串里的内容并处理,显然是不现实的。谁知道富文本框里会出现什么内容。后来我想到了替换。对,就是替换,简单粗暴。由于接口是WebApi的方式实现的,我选择直接在接口中对list里的富文本字段进行Replace操作,这样直接将富文本中所有路径带"/upload/"替换成前台可以找到的绝对路径。这样一来后台也不用修改,前台也可以直接读取到文件,虽然不是什么很好的方法,不过暂时能解决我的燃眉之急。

 

问题二:

上传图片、文件、视频过大无法上传

解决思路:

1:上篇我们将UEditor中的config.json改为ueditor.json,在ueditor.json中修改文件的上传大小限制,大小自己根据实际情况决定决定。

例:

"videoMaxSize": 1024000000, /* 上传大小限制,单位B,默认100MB */

2:在Startup.cs的ConfigureServices方法中加入或修改为

//解决文件上传Multipart body length limit 134217728 exceeded
            services.Configure<FormOptions>(x =>
            {
                x.ValueLengthLimit = int.MaxValue;
                x.MultipartBodyLengthLimit = int.MaxValue;
                x.MemoryBufferThreshold = int.MaxValue;
            });

3:.Net项目发布后在web.config中的location标签内加入下面的代码

<system.webServer>  
    <security>  
      <requestFiltering>  
        <requestLimits maxAllowedContentLength="2072576000"/>  
      </requestFiltering>  
    </security>  
  </system.webServer>

如果服务器或IIS没有限制的情况下,这么做基本上可以解决上传文件过大的问题,至于调整IIS的限制请自行百度吧,这里不再赘述。

 

问题三:

上传视频加入封面

解决思路:

固定封面

在ueditor.config.js的428添加最前面加上’poster’

video: ['poster','autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']

在ueditor.all.js的17668行添加poster = "/res/images/xxx.jpg"

str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls preload="none" poster = "/res/images/xxx.jpg" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                    '<source src="' + url + '" type="video/' + ext + '" /></video>';

这样保存、清除缓存之后重新上传的视频就会加入固定的图片作为封面了。

 

这里我用了另一个方法,简单省事,还是在ueditor.all.js的17668行上 直接将preload="none"改为preload="meta",这样每一个视频都会以第一个画面作为封面。

str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
                    ' controls preload="meta" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
                    '<source src="' + url + '" type="video/' + ext + '" /></video>';

问题四:

UEditor上传视频会出现空白,什么都不显示的问题。并且就算谷歌浏览器能显示,再次编辑时也不能正常显示。相信这是很多人都会遇到的问题。

解决思路:

网上有很多帖子介绍这个问题,首先是修改UEditor文件夹下的ueditor.config.js中365行,将whitList改为whiteList这个,本人亲测无效。┓( ´∀` )┏

后来只能加上替换法和三行法

修改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, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));

7343,7344,7346行,注释掉代码:

var root = UE.htmlparser(html);

me.filterInputRule(root);

html = root.toHtml();

这样虽然可以编辑了,但新的问题又来了。经本人测试如果富文本框只有视频,保存根本保存不上。不知道什么原因。之前上传的视频再次编辑时,视频不能够被删除。富文本也不能进行编辑。只有视频后加一个字符才能够正常的编辑。这个问题很神奇。

天已经很晚了,今天就先到这,睡觉去啦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值