Simditor是一个开源(MIT协议)的富文本编辑器,支持IE10+、Chrome、Firefox、Safari浏览器,只需要简单的配置就可以使用,功能精简,加载快速。
Simditor文本经过转义后,存入数据库。在页面上展示时,却显示的是标签,而不是正常的文本。以下是解决的办法:
1.转义的java代码如下:
2.jsp页面显示的标签:
3 浏览器页面显示的结果:
页面没有把正常的标签给显示出来,而是直接显示的是标签文本(如上图),所以需要在页面接收的时候需要用js转义下代码。今天这个方法就不用js转义代码。
4.经过查看,浏览器不显示正常的标签是因为浏览器把标签的内容都当成字符串,所以不能正常显示标签(如下图):
5.只需要在js中加两行代码就可以让内容正常显示:
(1).jsp:代码:
<div id="editorContent" class="noticeDetailBody simditor-body hide">${ noticeDetail.contentHtml }</div>
需要加上一个hide的class,在刚开始加载页面的时候不显示数据,类似隐藏域。
(2).JS代码:
var editor = $("#editorContent")[0];
$(editor).removeClass("hide").html(editor.textContent)
这样就可以让文本正常显示了。注意:有些版本的浏览器可能会出现不兼容的现象,只需要把textContent改为innerText就可以了,如下为正常显示的内容:
这样也可以防止xss的。