Summernote富文本编辑器的使用

查看的博客
https://www.cnblogs.com/kenhome/p/7743394.html
https://blog.csdn.net/wqlove520/article/details/96331111
https://www.cnblogs.com/hzb462606/p/8987832.html
https://www.cnblogs.com/cxchanpin/p/7323632.html
https://blog.csdn.net/a11441555/article/details/79789059
https://www.cnblogs.com/yiychao/p/11790047.html

js引入

    <!-- include libraries(jQuery, bootstrap) -->
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css"
          rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

推荐下载到本地，进行引入，速度会快很多。

自己的需求：
1、将图片和文本内容一起存入数据库。（未做查询再次显示）
前端参数组织：

  var wznr = escape($("#summernote").summernote("code"));
            var save = compileUrl('${rc.contextPath}/back/saveArticle');
            var paras = {
                "wznr":wznr,
                "bt": $("#bt").val(),
                "wzlx":$("#wzlx").val(),
                "bjr":$("#bjr").val()
            }
            $.ajax({
                type: 'POST',
                url: save,
                data: paras,
                async: false,
                //processData: false,//处理数据，其代表以对象形式上传的数据都会被转换为字符串的形式上传，上传文件时，要改为false
                //contentType: false, //发送数据的格式，默认值application/x-www-form-urlencoded，无法上传多维数组和文件
                success: function () {
                    layer.msg('操作成功', {time: 2000, icon: 1});
                }
            });

后端控制层：

	@PostMapping("/saveArticle")
	@ResponseBody
	public void saveArticle(@RequestParam("bt") String bt,
	                             @RequestParam("wzlx") String wzlx,
	                             @RequestParam("bjr") String bjr,
	                             @RequestParam("wznr") Object wznr) throws AppException {
		DataObject para =DataObject.getInstance();
		para.put("bt", bt);
		para.put("wzlx",wzlx);
		para.put("bjr",bjr);
		para.put("wznr",wznr);
		backService.saveArticle(para);
		return ;
	}

dao层获取

		String wzbt = para.getString("bt");//文章标题
		String wzlx = para.getString("wzlx");
		String wzid = DateUtil.getCurrentDateToString().substring(0,12) + wzlx;//生成文章id
		String wzfbsj = DateUtil.getCurrentDateToString();//文章发布时间
		String wzbjr = para.getString("bjr");//文章编辑人
		String wznr = para.getString("wznr");//文章内容

确实存入了数据库，不过数据这样存储并不好，为了减轻数据上传的压力和数据库的压力，还是将图片上传到服务器之后，返回url地址，再插入的富文本的img标签中，进行存储比较好。

2、将数据存放到服务器。（待续）