1、进入的插件
<link href="static/summernote/summernote.css" rel="stylesheet"> CSS
<script src="static/summernote/summernote.js"></script> JS
<script src="static/summernote/summernote-zh-CN.js"></script> 中文
2、jsp页面
<body>
<div id="summernote"></div>
<button id="submitBtn" type="button" class="btn btn-primary pull-right">提交报告</button>
<script>
$(document).ready(function() {
$('#summernote').summernote({
height : 395,//高度
lang : 'zh-CN',//中文
minHeight : null,
maxHeight : null,
focus : true,//加载选中
toolbar: [ //简易工具栏
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
]
});
$('#summernote').summernote('code', html_decode('${report.content}'));
$("#submitBtn").click(function() {
var report = html_encode($('#summernote').summernote('code'));
$.ajax({
method : "post",
url : 'loan/update_report',
data : {
reportId : '${report.reportId}',
loanId : '${info.loanId}',
content : report
},
success : function(data) {
if(data.status == "success") {
bootbox.alert("报告已提交!");
}else {
bootbox.alert("报告提交失败!");
}
}
})
})
});
//富文本转码解码
function html_encode(str) {
var s = "";
if (str.length == 0)
return "";
s = str.replace(/&/g, ">");
/* s = s.replace(/</g, "<");
s = s.replace(/>/g, ">"); */
s = s.replace(/ /g, " ");
s = s.replace(/\'/g, "'");
s = s.replace(/\"/g, """);
s = s.replace(/\n/g, "<br>");
/* s = s.replace(/\'/g,"\""); */
return s;
}
function html_decode(str) {
var s = "";
if (str.length == 0)
return "";
s = str.replace(/>/g, "&");
/* s = s.replace(/</g, "<");
s = s.replace(/>/g, ">"); */
s = s.replace(/ /g, " ");
s = s.replace(/'/g, "\'");
s = s.replace(/"/g, "\"");
s = s.replace(/<br>/g, "\n");
return s;
}
</script>
</body>
3、页面效果
4、这里主要是想说一下主要的回显的问题。这里上传的转码通通将单引号转为双号,如果不转的话,回显的时候单引号回合JS的单引号冲突导致报错。
。