summernote富文本編輯器的使用

最近在開發一個微信公眾號的后台，微信公眾號編輯的文章一直沒有得到很好地適應，大多數人也是在其他的編輯軟件中編輯好之后直接去復制到微信公眾平台中，考慮到復制后會排版出現問題，所以給大家推薦一款很不錯的Web富文本編輯器 （summernote）

官網地址為： https://summernote.org/

首先看一下編輯器的樣子:

 

接下來就簡單的實現這個編輯器。

1.首先需要從官網下載summernote的包（js和css兩部分）然后新建一個頁面，因為這個是建立在jquery和bootstarp兩個基礎上的，所以我們也需要引用他們，以下為我們引入的五個文件，代碼如下：

  <script src="../../js/jquery-3.1.1.min.js"></script>
  <link href="../../css/bootstrap.css" rel="stylesheet" />
  <script src="../../js/bootstrap.min.js"></script>
  <link href="dist/summernote.css" rel="stylesheet" />
  <script src="dist/summernote.js"></script>

2.創建一個summernote的容器。

 <div id="summernote">Hello Summernote</div>

3.創建summernote，並且將上傳的圖片保存到本地，然后再返回到編輯器中，如果直接復制圖片不去保存，圖片的地址會是原來的地址，並不是本地的地址。所以我們需要將圖片保存到本地，然后就可以將文章獲取存入數據庫了。

    <script>
        $(document).ready(function () {
            $('#summernote').summernote({
                height: 500,
                width:1000,
                minHeight: 300,           
                maxwidth: 1000,
                minwidth: 200,
                maxHeight: 500,
                focus: false,
                callbacks: {
                    onImageUpload: function (files, editor) {
                        var $files = $(files);
                        // 通過each方法遍歷每一個file
                        $files.each(function () {
                            var file = this;
                            // FormData，新的form表單封裝，具體可百度，但其實用法很簡單，如下
                            var data = new FormData();
                            // 將文件加入到file中，后端可獲得到參數名為“file”
                            data.append("file", file);
                            // ajax上傳
                            $.ajax({
                                data: data,
                                type: "POST",
                                url: "../../ashx_html/summernote.ashx",// div上的action
                                cache: false,
                                contentType: false,
                                processData: false,
                                // 成功時調用方法，后端返回json數據
                                success: function (response) {
                                    console.log(response)
                                    var json = $.parseJSON(response)
                                    if (json.state == "error") {
                                        alert("上傳失敗")
                                    } else {
                                        // 插入到summernote
                                        $('#summernote').summernote('insertImage', json.img_url);
                                    }
                                },
                            });
                        })
                    }
                }
            });
        });
    </script>

4.現在我們就可以在頁面上看到編輯器了，現在需要建立一個后台接收器，來接受上傳的圖片保存，然后將圖片地址返回到頁面。這里我使用ashx來接受，也可以用其他的方式，邏輯都是一樣的。

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            HttpFileCollection file_ = context.Request.Files;
            sumnmer_data summer_list = new sumnmer_data();
            if (file_.Count!=0)
            {
                long size = file_[0].ContentLength;//文件大小                           
                string type = file_[0].ContentType;//文件類型                            
                string name = file_[0].FileName;//文件名                           
                string _tp = System.IO.Path.GetExtension(name);//文件后綴名                                          
                string saveName = DateTime.Now.ToString("yyyyMMddHHmmssfff");//保存后的文件名稱（這里使用時間戳）                                                    
                string file = "\\admin\\summer_img\\"; //保存的路徑
                string path = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + file;
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                    DirectoryInfo dirInfo = new DirectoryInfo(path);
                    dirInfo.Attributes = FileAttributes.Normal & FileAttributes.Directory;
                }
                file_[0].SaveAs(path + saveName + _tp);
                summer_list.state = "succes";
                summer_list.img_url = file + saveName + _tp;
            }
            else
            {
                summer_list.state = "error";
            }
            context.Response.Write(JsonConvert.SerializeObject(summer_list));

        }
　　　　　//返回的類
        public class sumnmer_data {
            public string state { get; set; } //（成功為succes，失敗為error）
            public string img_url { get; set; }//圖片存到本地的路徑
        }

　　　　　將文件獲取 按路徑保存，將保存圖片的地址和狀態 存入summer_data中 ，然后轉為json字符串返回到頁面

5.獲取編輯器的內容：

 var markupStr = $('#summernote').summernote('code');
 console.log(markupStr) // 打印到控制器

  以上就是summernote富文本編輯器的操作和用法，視頻上傳和這個類似，還有一些編輯器控件的添加和刪除，還有一些編輯器的樣式修改 官網上都有很詳細的說明，不明白的可以留言，我努力解答。