java集成富文本编辑器wangEditor(Guns框架示例)

1.引入官方js(wangEditor.js)

链接：https://pan.baidu.com/s/18873LtE9E0InFMfpMkmISQ
提取码：0112

2.在业务js文件xxinfo.js中初始化对象

3.调用API

$(function () {
    Feng.initValidator("noticeInfoForm", NoticeInfoDlg.validateFields);
    var E = window.wangEditor;
    var contentValue=$('#contentValue').val();
    var editor = new E('#editor');//这个是页面中div的id，用于初始化富文本
    editor.create();
    editor.txt.html($("#content").val());//这个是编辑页面要用的，吧信息回写到富文本中
    editor.txt.html(contentValue);
    NoticeInfoDlg.editor = editor;
});

4.获取编辑器内数据

NoticeInfoDlg.collectData = function() {
    this
    .set('noticeId')
    .set('title')
    .set('lang')
    .set('dispOrd')
    .set('status')
    .set('activeDate')
    .set('inactiveDate')
    .set('objCode')
    .set('content',NoticeInfoDlg.editor.txt.html());
};

5.编辑器html代码

5.<div class="col-sm-11 b-r">
  <div class="form-group">
    <label class="col-sm-1 control-label" id="content">内容</label>
    <div class="col-sm-11">
      <div id="editor" class="editorHeight"></div>
    </div>
  </div>
</div>

6.注意实现成功后，一般内容会存储为html数据格式，前后台数据传递会发生xml数据转义问题，利用Guns内部xss防攻击过滤即可解决富文本转义问题，如下

    @Bean
     public FilterRegistrationBean xssFilterRegistration() {
         XssFilter xssFilter = new XssFilter();
         xssFilter.setUrlExclusion(Arrays.asList("/notice/update", "/notice/add", "/content/add"));
         FilterRegistrationBean registration = new FilterRegistrationBean(xssFilter);
         registration.addUrlPatterns("/*");
         return registration;
     }

说明：在该配置方法中新增一组路由即可

7.编辑器回显后台返回数据

html页面定义隐藏域

<input type="hidden" id="contentVal" value='${后台数据}'>  

显示数据区域定义

<div class="col-sm-12">
         <div id="editor" class="editorHeight"><!-- div的id  editor 和js对应 -->
         </div>
     </div>