(转)基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder...
http://www.cnblogs.com/wuhuacong/p/3780356.html
Web开发上有很多HTML的编辑控件,如CKEditor、kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用。CKEditor的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码或者采用其他上传控件(如Uploadify),还有一种方法是使用CKFinder,这两者的合并使用,能给我们带来更多的方便。
1、CKEditor的使用
CKEditor的下载地址是http://ckeditor.com/download,里面可以根据需要进行样式的定制,本文主要介绍当前较新的版本4.4.1的继承使用。而CKFinder的下载地址是:http://ckfinder.com/download。
CKEditor的使用比较简单,一般情况下根据官方的指引选择适当的样式下载就可以了,使用的时候,基本不需要怎么样修改配置文件。在MVC的视图页面里面,添加相关的引用文件就可以了。
@*添加对ckeditor的支持*@<script src="~/Content/JQueryTools/ckeditor/ckeditor.js"></script><script src="~/Content/JQueryTools/ckeditor/adapters/jquery.js"></script>
然后在界面添加需要编辑HTML内容的textarea控件,由于我的使用的是EasyUI的控件,因此设置了控件样式class="easyui-validatebox",也可以不管这里。
<tr><th><label for="Content">内容:</label></th><td><textarea class="easyui-validatebox" id="Content" name="Content" style="width:1024px"></textarea></td></tr>
我们一般使用的时候,需要一段javascript脚本进行初始化对应的控件,初始化代码如下所示。
<script>function initEditor() {$('#Content').ckeditor();//控件1$('#Content1').ckeditor();//控件2}</script>
添加相应的脚本和控件初始化代码后,就可以在界面中呈现出需要的效果了。
而之后的控件使用,就和普通的使用没有两样了,如赋值语句如下所示。
$('#Content1').val(info.Content);//ckeditor赋值
获取控件的值,也和普通给的一样
var content = $("#Content1").val();
2、CKFinder的集成使用
虽然CKFinder已经独立出来,但是它也提供了完美的整合效果,我们把它下载后,在压缩包里面的bin目录里面找到相应的 ckFinder.dll,把它添加我们项目工程的引用里面去,我们才能正常使用文件上传功能。
然后修改config.ascx文件里面的一些设置,使得我们能够顺利使用。
第一步设置CheckAuthentication函数返回True。
public override bool CheckAuthentication(){return true;}
第二步是设置SetConfig函数里面的BaseURL,这个基础地址需要设置和我们项目的地址一致,否则上传文件有问题。
public override void SetConfig(){// The base URL used to reach files in CKFinder through the browser.BaseUrl = "/Content/JQueryTools/ckfinder/userfiles/";........................
第三步,整合CKFinder到CKEditor,前面说了CKEditor默认是没有文件上传的功能操作的,需要添加CKFinder并进行配置才可以使用。
这步骤需要在CKEditor里面的config.js文件里面修改下面的配置参数(红色部分就可以了)。
CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here.// For complete reference see:// http://docs.ckeditor.com/#!/api/CKEDITOR.config.......................config.filebrowserBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹config.filebrowserImageBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹config.filebrowserFlashBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹config.filebrowserUploadUrl = '/Content/JQueryTools/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签) config.filebrowserImageUploadUrl = '/Content/JQueryTools/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签) config.filebrowserFlashUploadUrl = '/Content/JQueryTools/ckfinder/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签) };
3、集成效果展示
通过以上代码进行整合,在插入图片的操作页面里面,会增加一个浏览服务器按钮,上传操作选项卡等功能,方便对文件的浏览和上传操作,具体效果如下所示。
以上就是我在我的Web框架里面整合的HTML编辑控件和CKFinder文件上传组件,这两个组合起来,能够非常方便构建图文并茂的文章内容。
4、MVC的处理
这里需要注意的是由于textarea中有特殊字符,出于安全原因,默认情况mvc框架不允许提交的,应在相应方法上加上[ValidateInput(false)]属性。
如我为了提交HTML内容,需要在控制器对象里面,重写了内容的写入和更新操作函数,如下所示。
[ValidateInput(false)]public override ActionResult Insert(InformationInfo info){info.Editor = CurrentUser.Name;info.EditTime = DateTime.Now;return base.Insert(info);}[ValidateInput(false)]public override ActionResult Update(string id, FormCollection formValues){return base.Update(id, formValues);}
转载于:https://www.cnblogs.com/telwanggs/p/7125457.html
(转)基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder...相关推荐
- 基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自己主动适应宽带高度...
在默认情况下,EasyUI的DataGrid好像都没有具备自己主动宽度的适应功能,通常是指定像素宽度的.可是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度...
http://www.cnblogs.com/wuhuacong/p/4085725.html 在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码 在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件 ...
- [转载]基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
http://www.cnblogs.com/wuhuacong/p/3871991.html 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览 在博客园很多文章 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式...
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出...
http://www.cnblogs.com/wuhuacong/p/3873498.html 数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在 ...
最新文章
- MyBaties学习记录
- 智能提示导致Visual Studio 2010崩溃问题
- python内置函数 pdf_关于Python巧妙而强大的内置函数
- idea设置中文界面_《英雄联盟手游》设置界面中文翻译图分享 外服汉化界面一览...
- uniapp动态修改样式_uniapp样式动态绑定
- “刚毕业1年,做Python挣了60W!”网友:吹的不多..
- Mybatis JPA-集成方案+代码解析
- 自助bi工具如何搭建数据可视化
- 拓端tecdat|R语言分布滞后线性和非线性模型(DLNM)分析空气污染(臭氧)、温度对死亡率时间序列数据的影响
- uboot启动文件start.s和main.c解析
- [ThinkPHP]打开页面追踪调试
- Linux-firewalld-squid正向代理
- python身份证号处理代码_Python实现身份证号码解析
- 使用快捷指令高德导航(高德地图)
- SAP ABAP BAPI_MATERIAL_AVAILABILITY 查询可用库存
- Web:移动商城首页的页眉和页脚的布局和flex项目三个属性
- Optimizing radiotherapy plans for cancer treatment with Tensor Networks解读
- 输入正确的账号密码和验证码后 验证码一直报错误的解决办法
- discus 怎么添加门户功能
- Oracle EBS R12 GL总帐模块 查询日记帐明细SQL
热门文章
- (66)SPI外设驱动发送驱动(五)(第14天)
- (29)FPGA面试题时序电路延时
- git撤销commit到未提交状态_Git在4个阶段5种状态下的撤销操作
- vc6开发一个抓包软件_开发一个软件要多少钱?app软件开发的费用
- 7006.vue电商实战项目2-登录退出功能
- 【声传播】——球面波的反射
- DECLARE_GLOBAL_DATA_PTR
- [C++] - 中的复制初始化(copy initialization)
- nodejs ref操作_nodejs事件和事件循环详解
- linux 魔术分区,Parted Magic-Linux 中的分区魔术师