KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。
我们在开始过程中经常需要富文本框的支持,应有些客户的需求,在案例模块“产品管理”中增加了对KindEditor富文本框控件的支持。KindEditor富文本框控件的下载地址在文章的最后,需要的用户可以下载。
产品管理主界面如下图所示:
在产品管理主界面单击编辑按钮,打开产品编辑界面,在编辑界面的描述字段我们就用了KindEditor控件,如下图所示:
使用方法如下图代码所示:
1、引用KindEditor控件相关css与js到界面中,如下:
1 2 3 | <link rel= "stylesheet" href= "~/Content/Scripts/kindeditor/themes/default/default.css" /> <script charset= "utf-8" src= "~/Content/Scripts/kindeditor/kindeditor.js" ></script <script charset= "utf-8" src= "~/Content/Scripts/kindeditor/lang/zh_CN.js" ></script> |
2、 定义需要设置为KindEditor控件的html控件,如下:
1 | < textarea style="width:300px;height:30px;" id="PRODUCTDESCRIPTION" name="PRODUCTDESCRIPTION" /> |
3、在界面加载时指定关联,如下代码:
1 2 3 4 5 6 7 8 9 10 11 | <script type= "text/javascript" > $( function (){ window.editor = KindEditor.create( '#PRODUCTDESCRIPTION' , { resizeType: 1, width: '500px' ,minWidth: '490px' ,height: '50px' , urlType: 'domain' , // 带有域名的绝对路径 allowFileManager: false , items: [ 'source' , 'undo' , 'redo' , 'wordpaste' , 'justifyleft' , 'justifycenter' , 'justifyright' , 'insertorderedlist' , 'formatblock' , 'fontname' , 'fontsize' , 'forecolor' , 'bold' , 'italic' , 'table' , 'link' , 'unlink' , 'image' ] }); }); </script> |
4、对于具体的KindEditor控件的各参数与属性说明可以参考该控件的官方网站说明即可。
相关文章:
RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录
RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍
实例演示使用RDIFramework.NET 框架的工作流组件进行业务流程的定义—请假申请流程-Web
RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件Web业务平台
一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。
RDIFramework.NET官方网站:http://www.rdiframework.net/
RDIFramework.NET官方博客:http://blog.rdiframework.net/
同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏!
RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用!
欢迎关注RDIFramework.net框架官方公众微信(微信号:guosisoft),及时了解最新动态。
扫描二维码立即关注