C#實(shí)現(xiàn)將TextBox綁定為KindEditor富文本
關(guān)于 KindEditor
KindEditor 基于JavaScript 編寫，可以與眾多WEB應(yīng)用程序結(jié)合。KindEditor 依靠出色的用戶體驗(yàn)和領(lǐng)先的技術(shù)提供富文本編輯功能，是一款非常受歡迎的HTML在線編輯器。其呈現(xiàn)如下圖：
綁定設(shè)計(jì)
Asp.net 應(yīng)用程序 WebUI 中的 TextBox 控件是我們經(jīng)常使用的控件之一，為便于后端代碼統(tǒng)計(jì)一調(diào)用與管理，可在服務(wù)端通過綁定 KindEditor.js 的方式，將 TextBox 控件直接轉(zhuǎn)化為富文本編輯框，調(diào)用示例代碼如下：
KindEditor KindEditor = new KindEditor(Page);
KindEditor.init(new string[] { x_fbnr.ID });
創(chuàng)建 KindEditor 類，通過 init 方法初始化即可。
init方法提供了一個參數(shù)，string[] 數(shù)組，傳遞要轉(zhuǎn)化的 TextBox 的 ID，并且可以同時傳遞 Page 頁面上的 多個 ID ，以轉(zhuǎn)化多個 TextBox。
實(shí)現(xiàn)代碼
創(chuàng)建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
}創(chuàng)建類時請務(wù)必傳遞 Page類的實(shí)例化（即System.Web.UI.Page），而且 header 部分請務(wù)必添加 RunAt="server" 標(biāo)記，如下代碼示例：
<html> <head runat="server"> </head> .... </html>
init 方法會在服務(wù)器header對象重點(diǎn)引入如下文件并進(jìn)行動態(tài)添加：
| 序號 | 文件 | 控件類型 |
|---|---|---|
| 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項(xiàng) init.js 為讀取內(nèi)容后，替換傳入的對應(yīng) id ，并動態(tài)添加 header 中。
小結(jié)
kindEditor在某些瀏覽器上在工具欄點(diǎn)擊彈出類框有時會出現(xiàn)一些兼容性問題，無法正確定位顯示位置而無法使用，可試圖通過個點(diǎn)擊全屏按鈕暫時解決，如下圖：
到此這篇關(guān)于C#實(shí)現(xiàn)將TextBox綁定為KindEditor富文本的文章就介紹到這了,更多相關(guān)C# TextBox綁定為KindEditor富文本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了C#讀取中文文件出現(xiàn)亂碼的解決方法,涉及C#中文編碼的操作技巧,非常具有實(shí)用價值,需要的朋友可以參考下2015-05-05
在winform下實(shí)現(xiàn)左右布局多窗口界面的方法
在web頁面上我們可以通過frameset,iframe嵌套框架很容易實(shí)現(xiàn)各種導(dǎo)航+內(nèi)容的布局界面，而在winform、WPF中實(shí)現(xiàn)其實(shí)也很容易，通過本文給大家介紹在winform下實(shí)現(xiàn)左右布局多窗口界面的方法，本文介紹的非常詳細(xì)，對winform布局相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了如何在Unity中利用XML文件制作一個簡易的登錄系統(tǒng)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-03-03
本文主要介紹了C#中DateTime.Compare()比較時間大小,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
基于WPF實(shí)現(xiàn)帶明細(xì)的環(huán)形圖表
這篇文章主要介紹了如何利用WPF繪制帶明細(xì)的環(huán)形圖表?，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作有一定幫助，需要的可以參考一下2022-08-08
這篇文章介紹了C#實(shí)現(xiàn)同步模式下的端口映射程序，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Unity3D Shader實(shí)現(xiàn)掃描顯示效果（2）
這篇文章主要為大家詳細(xì)介紹了Unity3D Shader實(shí)現(xiàn)掃描顯示效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-03-03
本文詳細(xì)講解了C#使用XmlDocument操作XML的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了unity通過Mesh網(wǎng)格繪制圖形球體，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
c#.NET中日志信息寫入Windows日志中解決方案...2007-03-03