Kindeditor编辑插件的使用

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