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这个里面的一些封装的方法。