C#实现将TextBox绑定为KindEditor富文本_C#

关于 kindeditor

kindeditor 基于javascript 编写，可以与众多web应用程序结合。kindeditor 依靠出色的用户体验和领先的技术提供富文本编辑功能，是一款非常受欢迎的html在线编辑器。其呈现如下图：

绑定设计

asp.net 应用程序 webui 中的 textbox 控件是我们经常使用的控件之一，为便于后端代码统计一调用与管理，可在服务端通过绑定 kindeditor.js 的方式，将 textbox 控件直接转化为富文本编辑框，调用示例代码如下：

  kindeditor kindeditor = new kindeditor(page);
  kindeditor.init(new string[] { x_fbnr.id });

创建 kindeditor 类，通过 init 方法初始化即可。

init方法提供了一个参数，string[] 数组，传递要转化的 textbox 的 id，并且可以同时传递 page 页面上的多个 id ，以转化多个 textbox。

实现代码

创建kindeditor类，代码如下：

public class kindeditor
            {
                page currentpage = null;
                public kindeditor(object page)
                {
                    if (page == null)
                    {
                        return;
                    }
                    currentpage = (page)page;
                }
                public string init(string[] idlist)
                {
                    return init(idlist, null);
                }
                public string init(string[] idlist,literal writecontrol)
                {
 
                    htmllink csslink = new htmllink();
                    csslink.attributes.add("rel", "stylesheet");
                    csslink.href = "/common/kindeditor/themes/default/default.css";
                    currentpage.header.controls.add(csslink);
 
                    htmllink csslink2 = new htmllink();
                    
                    csslink2.attributes.add("rel", "stylesheet");
                    csslink2.href = "/common/kindeditor/plugins/code/prettify.css";
                    currentpage.page.header.controls.add(csslink2);
 
 
                    htmlgenericcontrol sc = new htmlgenericcontrol("script");
                    sc.attributes.add("charset", "uft-8");
                    sc.attributes.add("src", "/common/kindeditor/kindeditor.js");
                    
 
                    currentpage.page.header.controls.add(sc);
 
                    htmlgenericcontrol sc2 = new htmlgenericcontrol("script");
                    sc2.attributes.add("charset", "uft-8");
                    sc2.attributes.add("src", "/common/kindeditor/lang/zh_cn.js");
                    currentpage.page.header.controls.add(sc2);
 
                    htmlgenericcontrol sc3 = new htmlgenericcontrol("script");
                    sc3.attributes.add("charset", "uft-8");
                    sc3.attributes.add("src", "/common/kindeditor/plugins/code/prettify.js");
                    currentpage.page.header.controls.add(sc3);
 
                    string js = floadfromfile(currentpage.request.physicalapplicationpath + "common/kindeditor/init.js", encoding.default);
 
                    htmlgenericcontrol sc4 = new htmlgenericcontrol("script");
                    foreach (string id in idlist)
                    {
                        sc4.innerhtml += js.replace("{0}", id);
                    }
                    currentpage.page.header.controls.add(sc4);
                    return "";
                }
        		public string loadfromfile(string pathfile,system.text.encoding encodtype)
		        {
        			filestream fs;
		        	streamreader newsfile;
        			string linec,x_filecon="";
		        	fs=new filestream(pathfile,filemode.open);
        			newsfile=new streamreader(fs,encodtype); 
		        	try
			        {
        				linec=newsfile.readline();
		
		        		while(!(linec==null))
				        {
					        x_filecon+=linec+"\r\n";
					        linec=newsfile.readline();
				        }
				        newsfile.close();
				        fs.close();
			        }
        			catch(exception)
		        	{
				        newsfile.close();
				        fs.close();
			        }
        			finally
		        	{
				        newsfile.close();
				        fs.close();
			        }
			        return x_filecon;
 
        		}//loadfromfile function
 
            }

创建类时请务必传递 page类的实例化（即system.web.ui.page），而且 header 部分请务必添加 runat="server" 标记，如下代码示例：

<html>
   <head runat="server">
   </head>
 
....
 
</html>

init 方法会在服务器header对象重点引入如下文件并进行动态添加：

序号	文件	控件类型
1	/common/kindeditor/themes/default/default.css	htmllink
2	/common/kindeditor/plugins/code/prettify.css	htmllink
3	/common/kindeditor/kindeditor.js	htmlgenericcontrol
4	/common/kindeditor/lang/zh_cn.js	htmlgenericcontrol
5	/common/kindeditor/plugins/code/prettify.js	htmlgenericcontrol
6	/common/kindeditor/init.js	htmlgenericcontrol