summernote富文本插件快速上手

1：先导入   summernote.css   summernote.js

2：写个DIV 当做 富文本的框 供初始化

 <div id="oaNotifyContent">${oaNotify.content}</div>

3：在DOM 加载完成后进行初始化

 //   富文本初始化
           $("#oaNotifyContent").summernote({
               height:350,
               minHeight:null,    // 定义编辑框最低的高度
               maxHeight:null,    // 定义编辑框最高的高度
               disableDragAndDrop:true,   // 禁止拖拽
               lang:'zh-CN'
           });

4：就这样的话是提交表单是没办法获取到数据的。因为没有input标签。

          在富文本框上边写上个 hidden标签进行接收富文本的值

<input type="hidden" name="content" />
<div id="oaNotifyContent">${oaNotify.content}</div>

5：在提交表单的事件      将富文本的值存到 刚刚的input  隐藏标签中   

$("input[name='content']").val($('#oaNotifyContent').summernote('code'));

6：这时候input标签里面就有值了,        现在要进行验证内容是否为空！  

var oaNotifyContentVal = $('#oaNotifyContent').summernote('code')//取富文本的值
   if(oaNotifyContentVal.trim().length <= 0 ){
       alert("内容不能为空！");
       return false;
}

7：   提交表单 或  调用异步请求

form.submit();          $.post() 都可以

8：在后端服务器  接收到  数据  进行  CRUD 之前   对富文本进行特殊处理   反转义

对象.属性(StringEscapeUtils.unescapeHtml4(对象.属性));

PS：(1):如果没有进行反转义会是这样       &lt;pre class=&quot;brush: java;&quot;&gt;

         (2):需要的应该是<pre class=\"brush: java;\"> 

         (3) StringEscapeUtils   类的   unescapeHtml4   这个 方法在

               org.apache.commons.lang3.包下;

          (4)POM :

                     <dependency>
                                 <groupId>org.apache.commons</groupId>
                                 <artifactId>commons-lang3</artifactId>
                                 <version>3.5</version>
                      </dependency>

9：保存到数据库里面就是正确的数据了，在初始化的时候按照刚刚的步骤         自动把  html 标签注入 OK

 

posted @ 2018-10-26 16:41  邱健  阅读(562)  评论(0)  编辑  收藏  举报