C#實現(xiàn)將TextBox綁定為KindEditor富文本
關(guān)于 KindEditor
KindEditor 基于JavaScript 編寫,可以與眾多WEB應(yīng)用程序結(jié)合。KindEditor 依靠出色的用戶體驗和領(lǐng)先的技術(shù)提供富文本編輯功能,是一款非常受歡迎的HTML在線編輯器。其呈現(xiàn)如下圖:
綁定設(shè)計
Asp.net 應(yīng)用程序 WebUI 中的 TextBox 控件是我們經(jīng)常使用的控件之一,為便于后端代碼統(tǒng)計一調(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。
實現(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類的實例化(即System.Web.UI.Page),而且 header 部分請務(wù)必添加 RunAt="server" 標(biāo)記,如下代碼示例:
<html> <head runat="server"> </head> .... </html>
init 方法會在服務(wù)器header對象重點引入如下文件并進(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項 init.js 為讀取內(nèi)容后,替換傳入的對應(yīng) id ,并動態(tài)添加 header 中。
小結(jié)
kindEditor在某些瀏覽器上在工具欄點擊彈出類框有時會出現(xiàn)一些兼容性問題,無法正確定位顯示位置而無法使用,可試圖通過個點擊全屏按鈕暫時解決,如下圖:
到此這篇關(guān)于C#實現(xiàn)將TextBox綁定為KindEditor富文本的文章就介紹到這了,更多相關(guān)C# TextBox綁定為KindEditor富文本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
C#中Equals和GetHashCode使用及區(qū)別
這篇文章主要介紹了C#中Equals和GetHashCode使用及區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Winform窗體縮放下使用剪切板功能出現(xiàn)頁面閃動解決分析
這篇文章主要介紹了Winform窗體縮放下使用剪切板功能出現(xiàn)頁面閃動解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11C#實現(xiàn)遞歸調(diào)用的Lambda表達(dá)式
這篇文章介紹了C#實現(xiàn)遞歸調(diào)用的Lambda表達(dá)式,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06C# FileSystemWatcher 在監(jiān)控文件夾和文件時的使用方法
這篇文章主要介紹了C# FileSystemWatcher 在監(jiān)控文件夾和文件時的使用方法,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以參考下2020-06-06C#類繼承中構(gòu)造函數(shù)的執(zhí)行序列示例詳解
這篇文章主要給大家介紹了關(guān)于C#類繼承中構(gòu)造函數(shù)的執(zhí)行序列的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09