kindEditor编辑器的使用

最近在跟着教程写一些简单的项目的时候用到了kindEditor编辑器，在后台添加文章时，使用到了，下面就讲一下使用方法吧。

首先是替换，将文本框替换为编辑器，这里的实现比较简单：

 KindEditor.ready(function (K) { window.editor = K.create('#Article_Content', { height: '500px', uploadJson: '@Url.Action("Upload", "Attachment")', fileManagerJson: '@Url.Action("FileManagerJson", "Attachment")', allowFileManager: true, formatUploadUrl: false });

然后可以选择上传附件什么的，主要方法在Attachment/Upload中，其中_uploadConfg是将配置中的文件读取出来，这里把代码贴上来

public ActionResult Upload() { var _uploadConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~").GetSection("UploadConfig") as CMSDemo.Models.Config.UploadConfig; //文件的最大限制 int _maxSize = _uploadConfig.MaxSize; //保存的路径 string _savePath; //文件路径 string _filePath = "~/" + _uploadConfig.Path + "/"; //文件名 string _fileName; //拓展名 string _fileExt; //文件类型 string _dirName; //允许上传的类型 Hashtable extTable = new Hashtable(); extTable.Add("image", _uploadConfig.ImageExt); extTable.Add("flash", _uploadConfig.FileExt); extTable.Add("media", _uploadConfig.MediaExt); extTable.Add("file", _uploadConfig.FileExt); //获取到要上传的文件 HttpPostedFileBase _postFile = Request.Files["imgFile"]; if (_postFile == null) return Json(new { error = 1, message = "请选择文件" }); _fileName = _postFile.FileName; _fileExt = Path.GetExtension(_fileName).ToLower(); _dirName = Request.QueryString["dir"]; if (string.IsNullOrEmpty(_dirName)) _dirName = "image"; if (!extTable.ContainsKey(_dirName)) return Json(new { error = 1, message = "目录类型不存在" }); if (_postFile.InputStream == null || _postFile.InputStream.Length > _maxSize) return Json(new { error = 1, message = "文件大小超过限制" }); if (string.IsNullOrEmpty(_fileExt) || Array.IndexOf(((string)extTable[_dirName]).Split(','), _fileExt.Substring(1).ToLower()) == -1) return Json(new { error = 1, message = "不允许上传此类型的文件。 \n只允许" + ((String)extTable[_dirName]) + "格式。" }); _filePath += _dirName + "/" + DateTime.Now.ToString("yyyy-MM") + "/"; _savePath = Server.MapPath(_filePath); //检查上传目录 if (!Directory.Exists(_savePath)) Directory.CreateDirectory(_savePath); string _newFileName = DateTime.Now.ToString("yyyyMMdd_hhmmss") + _fileExt; _savePath += _newFileName; _filePath += _newFileName; //保存文件 _postFile.SaveAs(_savePath); //保存数据库记录 AttachmentService.Add(new Attachment() { Extension = _fileExt.Substring(1), FilePath = _filePath, Owner = User.Identity.Name, UploadDate = DateTime.Now, Type = _dirName, }); return Json(new { error = 0, url = Url.Content(_filePath) }); }

接着就是附件管理了，方法在Attachment/FileManageJson中，

 public ActionResult FileManagerJson(int? id ,string dir) { Models.AttachmentManagerViewModel _attachmentViewModel; IQueryable 
 
   _attachments; //id为null，表示是modelid为null，此时查询数据库中没有跟模型对应起来的附件列表（已上传，但上传的文章，还未保存） if (id == null) _attachments = AttachmentService.FindList(null, User.Identity.Name, dir); else //id不为null，返回指定模型的id和id为null附件列表 _attachments = AttachmentService.FindList((int)id, User.Identity.Name, dir, true); //初始化一个列表 var _attachmentList = new List 
  
    (_attachments.Count()); foreach(var _attachment in _attachments) { _attachmentViewModel = new Models.AttachmentManagerViewModel() { datetime = _attachment.UploadDate.ToString("yyyy-MM-dd-HH-mm-ss"), filetype = _attachment.Extension, has_file = false, is_dir = false, is_photo = _attachment.Type.ToLower() == "image" ? true : false, filename = Url.Content(_attachment.FilePath), // Filesize=0 }; FileInfo _fileInfo = new FileInfo(Server.MapPath(_attachment.FilePath)); _attachmentViewModel.filesize = (int)_fileInfo.Length; _attachmentList.Add(_attachmentViewModel); } //_attachmentList.Count return Json(new { moveup_dir_path = "", current_dir_path = "", current_url = "", total_count = _attachmentList.Count, file_list = _attachmentList },JsonRequestBehavior.AllowGet); } 
   
 

其中AttachmentManagerViewModel的模型，是官方文档的模型，我修改过模型后不能正常使用了，所以不能随意修改

 public class AttachmentManagerViewModel { public bool is_dir { set; get; } public bool has_file { set; get; } public int filesize { get; set; } public bool is_photo { get; set; } public string filetype { get; set; } public string filename { get; set; } public string datetime { get; set; } }

最后就是创建对话框，来显示我们刚才上传的附件了，我这里的附件主要是图片

 var editor2 = K.editor({ fileManagerJson: '@Url.Action("FileManagerJson", "Attachment")' }); K('#btn_picselect').click(function () { editor2.loadPlugin('filemanager', function () { editor2.plugin.filemanagerDialog({ viewType: 'VIEW', dirName: 'image', clickFn: function (url, title) { var url; $.ajax({ type: "post", url: "@Url.Action("CreateThumbnail", "Attachment")", data: { originalPicture: url }, async: false, success: function (data) { if (data == null) alert("生成缩略图失败！"); else { K('#DefaultPicUrl').val(data); K('#imgpreview').attr("src", data); } editor2.hideDialog(); } }); } }); }); });

官方也有相应的上传附件的方法，需要的可以去官方查阅相关文档