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

         #region 上传文件接收
         [HttpPost]
         public string Upload()
         {
             int MaxSize = ;     // 最大上传大小，默认是2M
             string newFile="";
             string ext="";
             string fn = "";
             try
             {
                 HttpFileCollectionBase fc = Request.Files;
                 HttpPostedFileBase f = Request.Files[];
                 if (f.ContentLength > MaxSize || f.ContentLength == )
                     return "{'err':'上传失败！文件大小不正确，必须是在0字节以上，2M字节以内','msg':''}";

                 if (!Directory.Exists(Server.MapPath("~/Upload")))
                 {
                     Directory.CreateDirectory(Server.MapPath("~/Upload"));
                 }
                 ext = f.FileName.Substring(f.FileName.LastIndexOf("."));
                 fn = DateTime.Now.ToString("yyyMMddHHmmssfff");
                 newFile=Server.MapPath("~/Upload") + "\\" + fn + ext;
                 f.SaveAs(newFile);

             }
             catch(Exception ex)
             {
                 return "{'err':'上传失败!'"+ex.Message+",'msg':''}";
             }
             return "{'err':'','msg':{'url':'!/Upload/" + fn+ext + "','localname':'" + ext + "','id':'1'}}";
         }
         #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次，得出以下有效代码

 //把字串放到变量里是为了检测输出时是否正确用的
 string tmp="{\"id\":\"0\",\"fileName\":\"/Upload/" + fn + ext + "\",\"attachmentPath\":\""+newFile.Replace("\\","/")+"\",\"attachmentSize\":\"" + ImgFile.ContentLength.ToString() + "\"}";
 return tmp;

解释下：

A：fn+ext是上传后生成的新文件名与扩展名

B：newFile是带着绝对路径的文件名，如：D;\\Project 2012\MVC\aaa.jpg"，但这里注意，我把双斜线换了，因为如果不换，这个JSON会不起作用，也就是说，不会返回文件名什么的，也就是网上有部分人问的问题，为什么DWZ上传附件无法带回文件名，切记了！

另外这里返回ActionResult也是不行了，我曾经试过这样返回

 public ActionResult Success_UploadLookUp(string Id, string FileName, string AttachmentPath, string AttachmentSize)
 {
      return Json(new
      {
           id = Id,
           fileName = FileName,
           attachmentPath = AttachmentPath,
           attachmentSize = AttachmentSize
      }, JsonRequestBehavior.AllowGet);
 }

上述代码放在一般DWZ要求返回JSON的地方绝对好使，但在这里就不行了，只能返回string类型

END

2014-7-23

我次奥xheditor，放弃了，不用了，这破玩意知道的人少，用的人也少，多年不更新了，气死我了，在DWZ里如果改个字体大小，就TMD提交不了！我去，什么破玩意！建议大家也换吧

我现在换了KindEditor4.1.10，经过简单调试，确定可用