java集成富文本编辑器wangEditor(Guns框架示例)
1.引入官方js(wangEditor.js)链接:https://pan.baidu.com/s/18873LtE9E0InFMfpMkmISQ提取码:01122.在业务js文件xxinfo.js中初始化对象3.调用API$(function () {Feng.initValidator("noticeInfoForm", NoticeInfoDlg.validateFields);var E
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)