一、在项目中添加Ckeditor4.5.11

(1) 新建 ASP.NET MVC5项目,解压缩ckeditor_4.5.11_standard.zip,在VS2015的解决方案资源管理器中将得到的“ckeditor”文件夹复制到当前项目的Scripts文件夹中。

(2) 此时在解决方案资源管理器中“ckeditor”文件夹的内容不可见,选择“显示所有文件”后,将该文件夹中的所有内容选中,鼠标右键,选择“包括在项目中”,即可看到并使用该文件夹的相应内容。

二、在视图文件中使用Ckeditor编辑器

(1) 在需要使用Ckeditor编辑器的视图中添加编辑器ckeditor.js和配置文件config.js的引用

<script src="~/Scripts/ckeditor/ckeditor.js"></script>

<script src="~/Scripts/ckeditor/config.js"></script>

(2) 方法一:

将内容行

@Html.EditorFor(model => model.PostContent, new { htmlAttributes = new { @class = "form-control" } })

更改为:@Html.TextAreaFor(model => model.PostContent, new { @class = "ckeditor" })

不过我自己用的是  <textarea id="@activities["F_Id"]" class="ckeditor"  ></textarea>

(3) 运行后效果如下图所示

(4) 方法二:在第(1)步的基础上,在当前视图的最后添加以下内容(这种方式有可能会使得编辑器提交的值为空值):

<script type="text/javascript">

CKEDITOR.replace('PostContent');

</script>

说明:CKEDITOR.replace('PostContent') 单引号中的内容为文本框的id值。

三、添加编辑器的本地图片上传功能

(1) 单击编辑器的“图片”按钮,此时图像属性中没有“上传”功能。

(2) 在项目的解决方案资源管理器中双击/Scripts/ckeditor/config.js ,打开Ckeditor配置文件,添加行: config.filebrowserImageUploadUrl = "/Home/Upload";

说明:等号右边为实现图片上传功能的 控制器名/方法(动作)名,实际开发时可以使用专门的上传控制器来处理图片上传功能,例如:"/Upload/Image"

(3) 如果要指定语言为简体中文则添加以下行:config.language = 'zh-cn';

(4) 刷新页面后再次点击图片按钮,已经显示“上传”选项卡(在Ckeditor的配置文件中添加config.filebrowserImageUploadUrl后,图像属性就可以看到“上传”选项卡),效果如下图所示:

四、实现图片上传功能

(1) 第三步中虽然已经显示“上传”选项卡,但没有用于支持图片上传功能的代码,由于已经在上面的步骤中指定"/Home/Upload"负责处理图片上传,所以在Home控制器添加Upload方法(动作),代码如下所示:

[HttpPost]

public ActionResult Upload(HttpPostedFileBase upload)

{

//获取图片文件名

var fileName = System.IO.Path.GetFileName(upload.FileName);

var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 upload 文件夹,需要在项目中添加对应的文件夹

upload.SaveAs(filePhysicalPath);  //上传图片到指定文件夹

var url = "/upload/" + fileName;

var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];

//上传成功后,我们还需要通过以下的一个脚本把图片返回到第一个tab选项

return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");

}

(2) 因为编辑器产生的内容中包含中HTML标签代码,提交时会导致页面验证失效,运行时有类似“...从客户端中检测到有潜在危险的 request.form 值。”的错误提示,这时可以通过为发表文章的方法(动作)添加特性(Attributes):[ValidateInput(false)]来解决这个问题。

(3) 显示带有HTML标签的内容:@Html.Raw(item.PostContent)

出处:http://www.cnblogs.com/mahidol/p/5972318.html

ASP.NET MVC 中使用Ckeditor4.5 编辑器的更多相关文章

  1. 警惕ASP.NET MVC中的ValidateInputAttribute

    最近在做一个ASP.NET MVC项目的时候发现,有一个Controller的Action死活都没法接收到从客户端提交过来的Html表单请求和数据,后来才发现是因为默认情况下ASP.NET MVC在执 ...

  2. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  3. ASP.NET MVC实现layui富文本编辑器应用

    先看看视图层 在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型.通过视图助手,为我们生成id和name属性相同的textarea标签. 备注: ...

  4. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  5. 2.ASP.NET MVC 中使用Crystal Report水晶报表

    上一篇,介绍了怎么导出Excel文件,这篇文章介绍在ASP.NET MVC中使用水晶报表. 项目源码下载:https://github.com/caofangsheng93/CrystalReport ...

  6. 关于 ASP.NET MVC 中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...

  7. 在Asp.Net MVC 中配置 Serilog

    Serilog 是一种非常简便记录log 的处理方式,使用Serilog可以生成本地的text文件, 也可以通过 Seq 来在Web界面中查看具体的log内容. 接下来就简单的介绍一下在Asp.Net ...

  8. 如何在 ASP.NET MVC 中集成 AngularJS(3)

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

随机推荐

  1. isScroll的滚动组件的用法

    <div class="wrapper">  <ul>     <li>1</li>     <li>2</li& ...

  2. HTTP头部信息解释分析(详细整理)

    这篇文章为大家介绍了HTTP头部信息,中英文对比分析,还是比较全面的,若大家在使用过程中遇到不了解的,可以适当参考下 HTTP 头部解释 1. Accept:告诉WEB服务器自己接受什么介质类型,*/ ...

  3. 万恶之源 - Python文件操作

    文件操作 初始文件操作 使用Python来读写文件是非常简单的操作,我们使用open()函数来打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作了 根据打开方式的不同能够执行的操作 ...

  4. phpstorm中FTP自动同步功能

    首先打开PhpStorm软件,新建个项目完成以后,找到Tools,  找到 Tools->Deployment->configruation点击进行设置,  点击configruation ...

  5. TileMap地图

    参考资料: http://8287044.blog.51cto.com/5179921/1045274 TileMap编辑器使用   1.认识TileMap     TileMap是一款开源的地图编辑 ...

  6. Docker深入浅出1

    Docker是一个开源的应用容器引擎,基于GO语言并遵从apache2.0协议开源. Docker可以让开发者打包他们的应用以及依赖包到一个轻量级,可移植的容器中,然后发布到任何流行的Linux机器上 ...

  7. UVM中的regmodel建模(二)

    UVM的寄存器模型,对一个寄存器bit中有两种数值,mirror值,尽可能的反映DUT中寄存器的值.expected值,尽可能的反映用户期望的值. 几种常用的操作: read/write:可以前门访问 ...

  8. zw版【转发·台湾nvp系列Delphi例程】HALCON HomMat2dRotate2

    zw版[转发·台湾nvp系列Delphi例程]HALCON HomMat2dRotate2 procedure TForm1.Button1Click(Sender: TObject);var op ...

  9. linux常用命令:date 命令

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1.命令格式: date [参数 ...

  10. python 冒泡排序的总结

    冒泡排序: 思路: 3 5 1 6 2 第一次:找到这些书中最大的一个,并把它放到最后 3.5找到大的数放到第二个位置1.5 5.1找到大的数放到第三个位置1.5.1 5.6找到大的数放到第四个位置 ...