在线HTML编辑器

 官网：http://kindeditor.net/demo.php      

源码：https://github.com/SeaLee02/FunctionModule   文件夹UploadFiles/WebDemo/UpControl/Editor.aspx和UploadFiles/WebDemo/UpControl2/EditDemo.aspx

下面用到的editor文件夹,下载：点击下载editor文件夹JS

运行效果：

首先你需要把样式搭建出来

这里的文本框位子最后会被我们的编辑器取代，文本框作用赋值和取值

引进我们的JS

 JS代码：

        <script>
            'use strict';  
            $(document).ready(function () {
                editor = KindEditor.create('.editor', {
                     '99.5%',
                    height: '350px',
                    resizeType: 1,
                    uploadJson: '../tool/upload_ajax.ashx?action=EditorFile&IsWater=1',   //编辑器上传图片
                    fileManagerJson: '../tool/upload_ajax.ashx?action=ManagerFile',  //网络上传图片
                    allowFileManager: true,
                    afterBlur: function () {     //这个方法必须，在4.1中不加这个我们的textarea是取不到值的
                        this.sync();
                    }
                });
            });
        </script>

上面的这么我们弄完了之后页面就会出来了，编辑器里面有一个上传图片的按钮我们是用不了的，所以再有了下面的一般处理程序

upload_ajax.ashx  页面：  

  public void ProcessRequest(HttpContext context)
        {
            //取得处事类型
            string action = HttpContext.Current.Request.QueryString["action"];

            switch (action)
            {
                case "EditorFile": //编辑器文件
                    EditorFile(context);
                    break;
                case "ManagerFile": //管理文件
                    ManagerFile(context);
                    break;
                default: //普通上传
                    UpLoadFile(context);
                    break;
            }
        }

        #region 编辑器上传
        private void EditorFile(HttpContext context)
        {
            bool _iswater = false; //默认不打水印
            if (context.Request.QueryString["IsWater"] == "1")
                _iswater = true;
            HttpPostedFile imgFile = context.Request.Files["imgFile"];
            if (imgFile == null)
            {
                showError(context, "请选择要上传文件！");
                return;
            }
            Upload upFiles = new Upload();
            string remsg = upFiles.fileSaveAs(imgFile, false, _iswater);     //这个保存方法 文件上传（插件版）里面有介绍
            Dictionary<string, object> dic = JsonHelper.DataRowFromJSON(remsg);
            string status = dic["status"].ToString();
            string msg = dic["msg"].ToString();
            if (status == "0")
            {
                showError(context, msg);
                return;
            }
            string filePath = dic["path"].ToString(); //取得上传后的路径
            Hashtable hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = filePath;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
            context.Response.Write(JsonHelper.ObjectToJSON(hash)); //转成json格式
            context.Response.End();
        }
       

        private void showError(HttpContext context, string message)
        {
            Hashtable hash = new Hashtable();
            hash["error"] = 1;
            hash["message"] = message;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
            context.Response.Write(JsonHelper.ObjectToJSON(hash));
            context.Response.End();
        }
        #endregion

JsonHelper这个类，会在项目里面，需要的可以去那里查看，如果不想这么麻烦 等下回介绍另一种转化的方法

浏览器的上传方式就不介绍了，一般不会用，需要的话源码里面去看。

编辑器基本上已经完成。

存，取数据
在页面上我放了两个按钮

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (Session["test"] != null)
                {
                    txt_Analysis.Value = Session["test"].ToString();
                }
                else
                {
                    txt_Analysis.Value = "";
                }
            }
        }
    
        /// <summary>
        /// 保存
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            Session["test"] = txt_Analysis.Value;
            //保存的是html标签
            Response.Redirect("Editor.aspx");
        }

        /// <summary>
        /// 清除
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void LinkButton2_Click(object sender, EventArgs e)
        {
            Session["test"] = null;
            Response.Redirect("Editor.aspx");
        }

经过试验，证明可以存到和取到

注：我们创建编辑器的时候需要把

  afterBlur: function () {    
                        this.sync();
                    }

参数加上，不然存取不到值。

第二种方法——简单的写法

如果后台不需要那么方法，我们可以简单一点

  <div class="group">
            <label class="title">类别说明</label>
            <div class="controls">
                <asp:TextBox runat="server" ID="txtExplain" TextMode="MultiLine" Width="1000" Height="500"></asp:TextBox>
            </div>
        </div>
          <asp:LinkButton ID="lnkBtnSave" runat="server" OnClick="lnkBtnSave_Click">保存</asp:LinkButton>
         <br />
         <asp:LinkButton ID="lnkBtnClear" runat="server" OnClick="lnkBtnClear_Click">清除Session</asp:LinkButton>

        <script src="../JS/jquery-1.11.0.min.js"></script>
        <script src="../editor/kindeditor-min.js"></script>
        <%--<script src="../editor/lang/zh-CN.js"></script>--%>
        <script>
            $(function () {
                KindEditor.ready(function (K) {
                    var editor1 = K.create('#txtExplain', {
                        cssPath: '/editor/plugins/code/prettify.css',
                        uploadJson: '/Tools/upload_json.ashx',
                        fileManagerJson: '/Tools/file_manager_json.ashx',
                        allowFileManager: true,
                        afterBlur: function () {
                            this.sync();  //这个方法必须，不加这个我们的textarea是取不到值的
                        }
                    });
                });
            })

        </script>

upload_json.ashx页面：  后台处理简单一点

public void ProcessRequest(HttpContext context)
    {
       
        SortedList<string, object> values = new SortedList<string, object>();
        JavaScriptSerializer js = new JavaScriptSerializer();
        HttpPostedFile _upfile = context.Request.Files["imgFile"];

        if (_upfile == null)
        {
            values.Add("error", 1);
            values.Add("message", "上传失败，没有选择文件");
            context.Response.Write(js.Serialize(values));
            return;
        }
        context.Response.Write(js.Serialize(fileSaveAs(_upfile)));
       
    }



    ///<summary>
    /// 文件上传方法E
    /// </summary>
    public SortedList<string, object> fileSaveAs(HttpPostedFile _postedFile)
    {

        SortedList<string, object> values = new SortedList<string, object>();

        try
        {
            string fileType = "jpg|png|jpeg|gif";

            string _fileExt = _postedFile.FileName.Substring(_postedFile.FileName.LastIndexOf(".") + 1);
            //验证合法的文件
            if (!CheckFileExt(fileType, _fileExt))
            {
                values.Add("error", 0);
                values.Add("message", "上传失败，错误的文件类型");
                return values;
            }

            int fileSize = 3*1024;
            if (fileSize > 0 && _postedFile.ContentLength > fileSize * 1024)
            {
                values.Add("error", 0);
                values.Add("message", "上传失败，您选择的文件过大");
                return values;
            }
            string _fileName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "." + _fileExt;

            string filePath = "/UplaodFileds/";

            //检查保存的路径 是否有/开头结尾
            if (filePath.StartsWith("/") == false) filePath = "/" + filePath;
            if (filePath.EndsWith("/") == false) filePath = filePath + "/";
            //按日期归类保存
            string _datePath = DateTime.Now.ToString("yyyyMMdd") + "/";
            filePath += _datePath;


            //获得要保存的文件路径
            string serverFileName = filePath + _fileName;

            //物理完整路径                    
            string toFileFullPath = HttpContext.Current.Server.MapPath(filePath);
            //检查是否有该路径没有就创建
            if (!Directory.Exists(toFileFullPath))
            {
                Directory.CreateDirectory(toFileFullPath);
            }
            //将要保存的完整文件名                
            string toFile = toFileFullPath + _fileName;


            //保存文件
            _postedFile.SaveAs(toFile);


            values.Add("error", 0);
            values.Add("message", "上传成功");
            values.Add("url", serverFileName);

            return values;

        }
        catch
        {
            return values;
        }
    }

    /// <summary>
    /// 检查是否为合法的上传文件
    /// </summary>
    /// <returns></returns>
    private bool CheckFileExt(string _fileType, string _fileExt)
    {
        string[] allowExt = _fileType.Split('|');
        for (int i = 0; i < allowExt.Length; i++)
        {
            if (allowExt[i].ToLower() == _fileExt.ToLower())
            {
                return true;
            }
        }
        return false;
    }