上一篇文章主要介绍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();
这样虽然可以编辑了,但新的问题又来了。经本人测试如果富文本框只有视频,保存根本保存不上。不知道什么原因。之前上传的视频再次编辑时,视频不能够被删除。富文本也不能进行编辑。只有视频后加一个字符才能够正常的编辑。这个问题很神奇。
天已经很晚了,今天就先到这,睡觉去啦。