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富文本编辑器的操做和用法，视频上传和这个相似，还有一些编辑器控件的添加和删除，还有一些编辑器的样式修改官网上都有很详细的说明，不明白的能够留言，我努力解答。