菜鸟学堂 服务器常用软件 主机测评网在线工具
快捷导航
爱站统计广告　商业广告，理性选择
广告　商业广告，理性选择
广告　商业广告，理性选择
您的位置：首页 → 软件编程 → C#教程 → C# TextBox绑定为KindEditor富文本

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

 更新时间：2024年04月17日 14:19:46   作者：初九之潜龙勿用  
KindEditor 依靠出色的用户体验和领先的技术提供富文本编辑功能,是一款非常受欢迎的HTML在线编辑器,下面我们就来看看C#如何将TextBox绑定为KindEditor富文本吧

脚本之家 / 编程助手：解决程序员“几乎”所有问题！
脚本之家官方知识库 → 点击立即使用

关于 KindEditor

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

绑定设计

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

?
1
2
KindEditor KindEditor = new KindEditor(Page);
KindEditor.init(new string[] { x_fbnr.ID });
登录后复制免费讲解

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

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

实现代码

创建KindEditor类，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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" 标记，如下代码示例：

?
1
2
3
4
5
6
7
<html>
   <head runat="server">
   </head>
  
....
  
</html>
登录后复制免费讲解

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

序号文件控件类型
1/common/kindEditor/themes/default/default.cssHtmlLink
2/common/kindEditor/plugins/code/prettify.cssHtmlLink
3/common/kindEditor/kindeditor.jsHtmlGenericControl
4/common/kindEditor/lang/zh_CN.jsHtmlGenericControl
5/common/kindEditor/plugins/code/prettify.jsHtmlGenericControl
6/common/kindEditor/init.jsHtmlGenericControl

其中第6项 init.js 为读取内容后，替换传入的对应 id ，并动态添加 header 中。 

小结

kindEditor在某些浏览器上在工具栏点击弹出类框有时会出现一些兼容性问题，无法正确定位显示位置而无法使用，可试图通过个点击全屏按钮暂时解决，如下图：

到此这篇关于C#实现将TextBox绑定为KindEditor富文本的文章就介绍到这了,更多相关C# TextBox绑定为KindEditor富文本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
蓄力AI

微信公众号搜索 “ 脚本之家 ” ，选择关注

程序猿的那些事、送书等活动等着你

原文链接：https://blog.csdn.net/michaelline/article/details/137864707

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！

相关文章

最新评论