summernote富文本編輯器的使用

最近在開發一個微信公衆號的後臺，微信公衆號編輯的文章一直沒有獲得很好地適應，大多數人也是在其餘的編輯軟件中編輯好以後直接去複製到微信公衆平臺中，考慮到複製後會排版出現問題，因此給你們推薦一款很不錯的Web富文本編輯器（summernote）css

官網地址爲： https://summernote.org/html

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

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

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的容器。json

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

3.建立summernote，而且將上傳的圖片保存到本地，而後再返回到編輯器中，若是直接複製圖片不去保存，圖片的地址會是原來的地址，並非本地的地址。因此咱們須要將圖片保存到本地，而後就能夠將文章獲取存入數據庫了。bootstrap

<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.獲取編輯器的內容：app

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

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