XHEditor(MVC4+DWZ) 部分问题的解决
百度上下载了xheditor1.2.1
一、使用方法:
1、把解压的目录copy到VS中;
2、在需要用的View页面中引用js
<script src="~/xheditor/xheditor-1.2.1.min.js"></script> <script src="~/xheditor/xheditor_lang/zh-cn.js"></script>
这里注意,如果你的目录不是xheditor,那么对不起,你一辈子也看不到效果,这儿耗费我了2个小时!
3、在页面中加一个TextArea控件
<textarea id="elm2" name="elm2" class="xheditor-mfull {upImgUrl:'@Url.Action("Upload")',upImgExt:'jpg,jpeg,gif,png'}" style="width: 480px;height:500px"></textarea>
这里使用的是class方式,也可以用JS方式,具体去看xheditor使用文档
现在这可以用了,但还没有接收文件,就是那个@Url.Action("Upload")
进入相关controller,加一个公共的Upload
1 #region 上传文件接收 2 [HttpPost] 3 public string Upload() 4 { 5 int MaxSize = 2097152; // 最大上传大小,默认是2M 6 string newFile=""; 7 string ext=""; 8 string fn = ""; 9 try 10 { 11 HttpFileCollectionBase fc = Request.Files; 12 HttpPostedFileBase f = Request.Files[0]; 13 if (f.ContentLength > MaxSize || f.ContentLength == 0) 14 return "{'err':'上传失败!文件大小不正确,必须是在0字节以上,2M字节以内','msg':''}"; 15 16 if (!Directory.Exists(Server.MapPath("~/Upload"))) 17 { 18 Directory.CreateDirectory(Server.MapPath("~/Upload")); 19 } 20 ext = f.FileName.Substring(f.FileName.LastIndexOf(".")); 21 fn = DateTime.Now.ToString("yyyMMddHHmmssfff"); 22 newFile=Server.MapPath("~/Upload") + "\\" + fn + ext; 23 f.SaveAs(newFile); 24 25 } 26 catch(Exception ex) 27 { 28 return "{'err':'上传失败!'"+ex.Message+",'msg':''}"; 29 } 30 return "{'err':'','msg':{'url':'!/Upload/" + fn+ext + "','localname':'" + ext + "','id':'1'}}"; 31 } 32 #endregion
好了,可以上传文件了。
二、小问题
1、使用出现了奇怪的问题
我在页面中使用了页面上传文件控件,就是<input id="xxx" name="xxx" type="file" />,这是一般人也会遇到的,在新闻编辑中,不仅需要一个html文本编辑器,有时候还需要上传标题图片什么的,但是这里出了问题!
问题的现象是:在正常的增加新记录页面中同时拥有上传控件与xheditor,如图
如果我在图文内容中输入的文字只有一行,其它栏正常录入,封面图片也正常上传一个,那么点击“提交”后可以正常提交。
但是,可但是,如果你在图文内容中按了一下回车,让文本换了行,那么你再点击“提交”后,界面一闪,就没事了,这时也没有提交到后台,后台设置的断点根本没用,也就是说,好像界面执行了什么,但没按我要求的提交到指定的action里,我就晕,同样的代码,只不过是换了个行,怎么就提交到另一个空间去了呢?
经过DWZ群里的@漠听风吟的远程,也只是发现出现个“xxx没找到或为空”,但每次执行都会不同,郁闷了一个下午+一个晚上+一个上午
问题的解决:
如果要在DWZ里上传文件,必须按照DWZ的要求,在Form中增加一个onsubmit,如下
onsubmit = "return iframeCallback(this);"
正是它在捣乱!!!
用xheditor编辑器,也是在页面中增加出一个iframe来,大家可以在页面中用“开发人员工具”看一下,是不是增加了iframe,所以,我合理地怀疑它们有冲突。
于是,我将代码做了一点改动
//将
onsubmit = "return iframeCallback(this);"
//改成了
onsubmit = "return navTabSearch(this);"
并去掉了上传标题图片部分,结果就是终于正常了,在xheditor中怎么写内容就都没事了。
2、查找带回无法返回附件文件名
一入DWZ门愁似海啊,步步惊心!
这不是把上传图片摘出来了吗?本想放到dialog中,结果就需要在dialog中把上传后的文件名带回来,再看看DWZ的原码,有这部分内容,是混合在一起的,其中有关于附件上传的示例。
于是就照着做了一遍,结果,没任何返回,纳闷,why?
把示例运行一遍,嘿,竟然也无法返回文件名,次奥,什么情况?
分析:我改过示例代码?不记得了。版本太老?1.4.5,最新1.4.6。
决定:下载个最新试试,费了半天劲,下了,运行,同样没有返回文件名,次奥again
分析:版本太高?
决定:找个没用过的版本,费了半天劲,下了,运行,同样没有返回文件名,次奥x3
看到示例里有段代码是类似这样的
$.bringBack({id:'1',fileName:'zzzz.txt'})
于是把它放到dialog的form的onsubmit中,咦,返回了!有信心了,至少不是DWZ版本的问题了
最后,在controller的代码中,用返回string类型调试N次,得出以下有效代码
1 //把字串放到变量里是为了检测输出时是否正确用的 2 string tmp="{\"id\":\"0\",\"fileName\":\"/Upload/" + fn + ext + "\",\"attachmentPath\":\""+newFile.Replace("\\","/")+"\",\"attachmentSize\":\"" + ImgFile.ContentLength.ToString() + "\"}"; 3 return tmp;
解释下:
A:fn+ext是上传后生成的新文件名与扩展名
B:newFile是带着绝对路径的文件名,如:D;\\Project 2012\MVC\aaa.jpg",但这里注意,我把双斜线换了,因为如果不换,这个JSON会不起作用,也就是说,不会返回文件名什么的,也就是网上有部分人问的问题,为什么DWZ上传附件无法带回文件名,切记了!
另外这里返回ActionResult也是不行了,我曾经试过这样返回
1 public ActionResult Success_UploadLookUp(string Id, string FileName, string AttachmentPath, string AttachmentSize) 2 { 3 return Json(new 4 { 5 id = Id, 6 fileName = FileName, 7 attachmentPath = AttachmentPath, 8 attachmentSize = AttachmentSize 9 }, JsonRequestBehavior.AllowGet); 10 }
上述代码放在一般DWZ要求返回JSON的地方绝对好使,但在这里就不行了,只能返回string类型
END
2014-7-23
我次奥xheditor,放弃了,不用了,这破玩意知道的人少,用的人也少,多年不更新了,气死我了,在DWZ里如果改个字体大小,就TMD提交不了!我去,什么破玩意!建议大家也换吧
我现在换了KindEditor4.1.10,经过简单调试,确定可用