.NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件

程序员文章站 2022-05-30 16:18:09

...

　　KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

　　我们在开始过程中经常需要富文本框的支持，应有些客户的需求，在案例模块“产品管理”中增加了对KindEditor富文本框控件的支持。KindEditor富文本框控件的下载地址在文章的最后，需要的用户可以下载。

　　产品管理主界面如下图所示：

.NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件

博客分类： RDIFramework.NETJavaScript/Jquery/EasyUI.NET技术 RDIFramework.NETWeb前端开发框架web框架.net

　　在产品管理主界面单击编辑按钮，打开产品编辑界面，在编辑界面的描述字段我们就用了KindEditor控件，如下图所示：

　　使用方法如下图代码所示：

　　1、引用KindEditor控件相关css与js到界面中，如下：

[html] view plain copy
<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控件，如下：

[html] view plain copy
<textarea style="width:300px;height:30px;" id="PRODUCTDESCRIPTION" name="PRODUCTDESCRIPTION" />　　  

3、在界面加载时指定关联，如下代码：

[javascript] view plain copy
<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> 　　  