我用过几个EDITOR,还是比较喜欢KINDEDITOR。这个工作可能最近要用到了,周末在家花时间了解了一下。做了一下备注在这里,以备日后方便查阅。

  1.首先去KINDEDITOR的官网下载最新的版本,然后在MVC的CONTENT文件夹下面把下载的包解压放进去。

  2.然后看一下VIEW视图做一下引用,显示

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="/Content/KindEditor/themes/default/default.css" />
<script charset="utf-8" src="/Content/KindEditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/Content/KindEditor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="txtContent"]', {
resizeType: 1,
uploadJson: '@Url.Action("UploadImages", "Default")'
});
});
</script>
</head>
<body>
<div>
<form id="formGuestBook" method="post" action="/Default/Add">
<!--类名/方法名-->
姓名:<input type="text" id="txtName" name="txtName" /><br />
内容:
<textarea id="txtContent" name="txtContent" style="width:800px;height:400px;visibility:hidden;"></textarea> <input type="submit" name="btnSubmitGuestBook" value="提交留言" />
</form>
</div>
</body>
</html>

  3.这里提交后给Controller后报错,错误如下:

  解决很简单,在Controller的方法前加一下[ValidateInput(false)],如下代码所示:

     [ValidateInput(false)]
public ActionResult Add(string txtName, string txtContent)
{
return View();
}

  4.最后改自官网自带的图片上传功能,原来是WEBFORM的HANDLER写的。改成MVC的。使用前需引用LITJSON

      public ActionResult UploadImages()
{ //String aspxUrl = HttpContext.Request.Path.Substring(0, HttpContext.Request.Path.LastIndexOf("/") + 1);
String aspxUrl = ""; //文件保存目录路径
String savePath = "/Content/KindEditor/attached/"; //文件保存目录URL
String saveUrl = aspxUrl + "/Content/KindEditor/attached/"; //定义允许上传的文件扩展名
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp");
extTable.Add("flash", "swf,flv");
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小
int maxSize = ;
//this.context = HttpContext; HttpPostedFileBase imgFile = HttpContext.Request.Files["imgFile"];
if (imgFile == null)
{
showError("请选择文件。");
} String dirPath = HttpContext.Server.MapPath(savePath);
if (!Directory.Exists(dirPath))
{
showError("上传目录不存在。");
} String dirName = HttpContext.Request.QueryString["dir"];
if (String.IsNullOrEmpty(dirName))
{
dirName = "image";
}
if (!extTable.ContainsKey(dirName))
{
showError("目录名不正确。");
} String fileName = imgFile.FileName;
String fileExt = Path.GetExtension(fileName).ToLower(); if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
{
showError("上传文件大小超过限制。");
} if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring().ToLower()) == -)
{
showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");
} //创建文件夹
dirPath += dirName + "/";
saveUrl += dirName + "/";
if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
}
String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
dirPath += ymd + "/";
saveUrl += ymd + "/";
if (!Directory.Exists(dirPath))
{
Directory.CreateDirectory(dirPath);
} String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
String filePath = dirPath + newFileName; imgFile.SaveAs(filePath); String fileUrl = saveUrl + newFileName; Hashtable hash = new Hashtable();
hash["error"] = ;
hash["url"] = fileUrl;
return Content(JsonMapper.ToJson(hash)); //return View();
} private ContentResult showError(string message)
{
Hashtable hash = new Hashtable();
hash["error"] = ;
hash["message"] = message; return Content(JsonMapper.ToJson(hash));
}

ASP.NET MVC- KindEditor的使用的更多相关文章

  1. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  2. ASP.NET MVC 文件上传和路径处理

    ASP.NET MVC 文件上传和路径处理总结 目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传 ...

  3. 封装Web Uploader 上传插件、My97DatePicker、百度 编辑器 的使用 (ASP.NET MVC)

    Web Uploader: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优 ...

  4. ASP.NET MVC+JQueryEasyUI1.4+ADO.NET Demo

    1.JQueryEasyUI使用 JQuery EasyUI中文官网:http://www.jeasyui.net/ JQuery EasyUI中文官网下载地址:http://www.jeasyui. ...

  5. Asp.net MVC CSS/Javascript Bundle 配置文件

    Asp.net mvc 中使用 Web Optimization 可以合并.压缩JS和CSS文件,但是每次修改都要改代码 ~/App_Start/BundleConfig.cs ,遂有了将它挪到配置文 ...

  6. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  7. 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus

    最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...

  8. 一百元的智能家居——Asp.Net Mvc Api+讯飞语音+Android+Arduino

    大半夜的,先说些废话提提神 如今智能家居已经不再停留在概念阶段,高大上的科技公司都已经推出了自己的部分或全套的智能家居解决方案,不过就目前的现状而言,大多还停留在展厅阶段,还没有广泛的推广起来,有人说 ...

  9. Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合

    今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...

  10. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章:创建基本的MVC Web站点

    在这一章中,我们将学习如何使用基架快速搭建和运行一个简单的Microsoft ASP.NET MVC Web站点.在我们马上投入学习和编码之前,我们首先了解一些有关ASP.NET MVC和Entity ...

随机推荐

  1. oracle之检查点(Checkpoint)

    检查点是一个数据库事件,它把修改数据从高速缓存写入磁盘,并更新控制文件和数据文件.检查点分为三类:1)局部检查点:单个实例执行数据库所有数据文件的一个检查点操作,属于此实例的全部脏缓存区写入数据文件. ...

  2. 更新Code First生成的数据库

    1,首次访问时会自动生成数据库 2,某个Model增加一个字段后,再次访问会报,数据库不是最新 操作 1,Enable-Migrations 注意选择Default project为Star.Core ...

  3. Shell教程2-变量

    Shell支持自定义变量. 定义变量 定义变量时,变量名不加美元符号($),如: 复制纯文本新窗口   variableName="value" 注意,变量名和等号之间不能有空格, ...

  4. MySQL与Oracle 差异比较之七其它

    其它 编号 类别 ORACLE MYSQL 注释 1 内连接的更改 1.select a.*, b.*, c.*, d.*  from a, b, c, d where a.id = b.id   a ...

  5. Linux共享内存(一)

    inux系统编程我一直看 <GNU/LINUX编程指南>,只是讲的太简单了,通常是书和网络上的资料结合着来掌握才比较全面 .在掌握了书上的内容后,再来都其他资料 . 原文链接 http:/ ...

  6. YII Framework学习教程-YII的国际化

    一个web应用,发布到互联网,就是面向全球用户.用户在世界的各个角落都可以访问到你的web应用,当然要看你的网站和不和谐,不和谐的web应用在和谐社会是不让你访问的. YII提供了国际化的支持,可以让 ...

  7. win 7 下Maven环境的搭建

    Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具. Maven是什么? 比较正式的定义:Maven是一个项目管理工具,它包含了: 一个项目对象模型 (Project O ...

  8. SORT UNIQUE|AGGREGATE|GROUP BY|ORDER BY|JOIN

    相信做oracle开发和管理的朋友对sort肯定不会陌生,大家通常都遇到这样那样的排序性能问题,所以我写这一系列关于sort的文章告诉大家在oracle里面sort是怎么一回事以及如果调整sort获得 ...

  9. map使用.xml

    map 是一种关联容器,  提供一对一的关联, 关联的形式为: KEY----VALUE     关键字不重复.multimap与map类似,但是允许关键字重复           即:关键字和与之对 ...

  10. Ubuntu/CentOS使用BIND配置DNS服务器

    ------ubuntu server 12---------- 1.安装bind9 sudo apt-get -y install bind9 bind9utils 2.配置  /etc/bind/ ...