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控件的各参数与属性说明可以参考该控件的官方网站说明即可。
本文转自yonghu86博客园博客，原文链接：http://www.cnblogs.com/huyong/p/7508825.html，如需转载请自行联系原作者
