C# 将 TextBox 绑定为 KindEditor 富文本

简介:

关于 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

本文所涉 KindEditor 为本人改造版,请下载我的资源:


https://download.csdn.net/download/michaelline/89154343


下载后创建解压到 {webroot}\common\kindEditor 目录下即可完成部署。


实现代码

创建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>

nit 方法会在服务器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

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

小结

kindEditor在某些浏览器上在工具栏点击弹出类框有时会出现一些兼容性问题,无法正确定位显示位置而无法使用,可试图通过个点击全屏按钮暂时解决,如下图: 本文所用 js 为本人改造版,如可以允许一些特殊标记的再定义,大家也可以根据实际应用进行修改。感谢您的阅读,希望本文能对您有所帮助

相关文章
|
2月前
|
C#
C# textbox接受tab作为值输入
C# textbox接受tab作为值输入
34 0
|
C# Windows
艾伟_转载:C# WinForm开发系列 - TextBox
包含金额/日期输入框,带弹出数字面板的计算输入框,安全密码输入等控件(文章及相关代码搜集自网络,仅供参考学习,版权属于原作者! ).   1.CalculatorBox    CalculatorBox.
1369 0
|
C#
【C#/WPF】TextBlock/TextBox/Label编辑文字的问题
原文:【C#/WPF】TextBlock/TextBox/Label编辑文字的问题 标题有点描述不清,就当是为了方便自己用时易于搜索到。
1359 0
|
C# 数据安全/隐私保护
C# Textbox的ImeMode取值对中文输入法的影响(进入才能看清)
原文:C# Textbox的ImeMode取值对中文输入法的影响(进入才能看清) C# Textbox的ImeMode取值对中文输入法的影响             取值 五笔加加 微软拼音3.
2312 0
|
C#
C# TextBox 焦点
TextBox焦点问题 1.失焦 KeyBoard.ClearFocus(); 存在一个问题,失去焦点之后,中文通过输入法依旧是可以输入的。 如果是中文文本框,按Enter失焦,同时禁止输入中文,可以调用 InputMethod.SetIsInputMethodEnabled(textBox,false); 在重新GetFocus之后,InputMethod.SetIsInputMethodEnabled(textBox,true)就行。
1209 0
|
C#
C#: 向Word插入排版精良的Text Box
Text Box(文本框)是Word排版的工具之一。在Word文档正文的任何地方插入文本框,可添加补充信息,放在合适的位置,也不会影响正文的连续性。我们可以设置文本框的大小,线型,内部边距,背景填充等效果。
847 0
c#TextBox输入框自动提示、自动完成、自动补全功能
功能概览 相关属性 TextBox.AutoCompleteCustomSource 属性 获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] 时要使用的自定义 T:System.Collections.Specialized.StringCollection。
1709 0
c# winforms TextBox的记忆功能
c# winforms TextBox的记忆功能   1:在项目上点右键  sproperties-settings 添加项目 如 MyText  类型 String 2: 获取值:   string loginId = Properties.