1.首先kindeditor这个插件需要配合着asp.net的自生带的控件textbox来实现
2.首先前台界面代码
<f:FormRow runat="server"> <Items> <f:ContentPanel ID="contentpanel1" runat="server" Height="500px" Width="800px" Title="项目内容"> <asp:TextBox runat="server" ID="kindeditor1" Width="800px" Height="500px" TextMode="MultiLine" Style="visibility: hidden;"></asp:TextBox> </f:ContentPanel> </Items> </f:FormRow>
这里以fineui中的控件为例
3.前台需要添加一些js代码如下所示
<% KindeditorModel kmo = new KindeditorModel(); kmo.EditorType = KindeditorModel.EditorMode.高级; kmo.UrLstr = "/res/kindeditor"; kmo.EditorId = kindeditor1.ClientID; kmo.AllowFileManager = true; kmo.AllowFileUpload = true; kmo.AllowFlashUpload = true; kmo.AllowImageUpload = true; kmo.AllowMediaUpload = true; KindeditorHelper kh = new KindeditorHelper(kmo); %> <%=kh.GetLoadJs() %> <script type="text/javascript"> Ext.onReady(function () { <%=kh.CreatKind() %> }); </script>
4.后台想要获取到这个textbox里面的值,需要在按钮控件上面添加一个OnClientClick方法如下所示
<Toolbars> <f:Toolbar runat="server" Position="Bottom"> <Items> <f:ToolbarFill ID="ToolbarFill1" runat="server"> </f:ToolbarFill> <f:Button ID="Button_save" runat="server" ValidateForms="form_Edit" Text="保存" Icon="SystemSaveNew" OnClick="Button_save_OnClick" OnClientClick="getHtmlValue()"> </f:Button> </Items> </f:Toolbar> </Toolbars>
这样后台就可以获取到这个控件里面的值了
5.这个getHtmlValue()这个方法封装在kindeditorHelper中,因为想要应用这个插件需要一个kindeditorHelper。这个放在code文件夹中,具体内容如下所示
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace jr.web.code { public class KindeditorHelper { private KindeditorModel model; public KindeditorHelper(KindeditorModel km) { model = km; } public string GetLoadJs() { return @"<link rel=‘stylesheet‘ href=‘" + model.UrLstr + @"/themes/default/default.css‘ /> <link rel=‘stylesheet‘ href=‘" + model.UrLstr + @"/plugins/code/prettify.css‘ /> <script charset=‘utf-8‘ src=‘" + model.UrLstr + @"/kindeditor-all-min.js‘></script> <script charset=‘utf-8‘ src=‘" + model.UrLstr + @"/lang/zh_CN.js‘></script> <script> var editor; function getHtmlValue() {{ // 同步数据后可以直接取得textarea的value editor.sync(); }} function resetHtmlValue() {{ // 同步数据后可以直接取得textarea的value editor.html(‘‘); }} </script>"; } public string CreatKind() { string js = string.Format(@" editor = KindEditor.create(‘#{0}‘, {{ items : [{1}], uploadJson: ‘{2}/asp.net/upload_json.ashx‘, fileManagerJson: ‘{2}/asp.net/file_manager_json.ashx‘, {3} }}); {4} prettyPrint(); ", model.EditorId, GetEditorType(model.EditorType), model.UrLstr, GetAllStr(), model.ReadOnly ? "editor.readonly(true);" : string.Empty); return js; } private string GetAllStr() { string allowFileManagerStr = model.AllowFileManager ? "allowFileManager: true," : string.Empty; string allowImageUploadStr = model.AllowImageUpload ? string.Empty : "allowImageUpload:false,"; string allowFlashUploadStr = model.AllowFlashUpload ? string.Empty : "allowFlashUpload:false,"; string allowMediaUploadStr = model.AllowMediaUpload ? string.Empty : "allowMediaUpload:false,"; string allowFileUploadStr = model.AllowFileUpload ? string.Empty : "allowFileUpload:false,"; string allStr = GetDeliveryLanguage(model.LanguageType) + allowFileManagerStr + allowImageUploadStr + allowFlashUploadStr + allowMediaUploadStr + allowFileUploadStr; return allStr; } /// <summary> /// 获取国际化 /// </summary> /// <param name="delivery"> 国际化名称</param> /// <returns></returns> private string GetDeliveryLanguage(KindeditorModel.LanguageMode delivery) { switch (delivery) { default: return string.Empty;//默认简体中文 case KindeditorModel.LanguageMode.English: return "langType:‘en‘,"; case KindeditorModel.LanguageMode.繁體中文: return "langType:‘zh_TW‘,"; case KindeditorModel.LanguageMode.Korean: return "langType:‘ko‘"; case KindeditorModel.LanguageMode.Arabic: return "langType:‘ar‘,"; } } private string GetEditorType(KindeditorModel.EditorMode mode) { switch (mode) { case KindeditorModel.EditorMode.普通: return @"‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘, ‘fullscreen‘"; case KindeditorModel.EditorMode.仅表情: return @"‘emoticons‘"; default: //默认高级 //case KindeditorModel.EditorMode.高级: return @" ‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘print‘, ‘template‘, ‘code‘, ‘cut‘, ‘copy‘, ‘paste‘, ‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘, ‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘, ‘fullscreen‘, ‘/‘, ‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘, ‘image‘, ‘multiimage‘, ‘flash‘, ‘media‘, ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘, ‘anchor‘, ‘link‘, ‘unlink‘";//, ‘|‘, ‘about‘ //去掉关于编辑器说明 //AllowFileManager = true; case KindeditorModel.EditorMode.文本: return @"‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,‘link‘, ‘fullscreen‘"; case KindeditorModel.EditorMode.视频: return @" ‘media‘"; //AllowMediaUpload = false; } return ""; } } public class KindeditorModel { private string _editorId = "kindeditor"; /// <summary> /// 控件id名称 /// </summary> public string EditorId { get { return _editorId; } set { _editorId = value; } } /// <summary> /// 语言类型 /// </summary> public enum LanguageMode { English, 简体中文, 繁體中文, Korean, Arabic } /// <summary> /// 默认语言 /// </summary> public LanguageMode _language = LanguageMode.简体中文; /// <summary> /// 国际化 /// </summary> public LanguageMode LanguageType { get { return _language; } set { _language = value; } } /// <summary> /// 控件模式枚举 /// </summary> public enum EditorMode { 仅表情, 高级, 普通, 文本, 视频 } /// <summary> /// 默认模式 /// </summary> private EditorMode mode = EditorMode.高级; /// <summary> /// 控件模式 /// </summary> public EditorMode EditorType { get; set; } #region 控件属性 /// <summary> /// 路径(默认为../kindeditor),只设置一次就可以。 /// </summary> public string UrLstr { get { return _Url; } set { _Url = value; } } private string _Url = "../kindeditor"; /// <summary> /// true为只读模式 /// </summary> public bool ReadOnly { get; set; } /// <summary> /// 是否可以浏览服务器文件(浏览图片,视频等文件) /// </summary> public bool AllowFileManager { get; set; } /// <summary> /// true时显示图片上传按钮。 /// </summary> public bool AllowImageUpload { get; set; } /// <summary> /// true时显示Flash上传按钮。 /// </summary> public bool AllowFlashUpload { get; set; } /// <summary> /// true时显示视音频上传按钮。 /// </summary> public bool AllowMediaUpload { get; set; } /// <summary> /// true时显示文件上传按钮。 /// </summary> public bool AllowFileUpload { get; set; } #endregion } }
以上就是kindeditor插件的具体使用方法,希望大家受用,主要注意的是其中的js方法和封装的类,还有在kindeditorHelper这个里面的一些封装的方法。
原文:http://www.cnblogs.com/wangyunlzm/p/6694040.html