1. 程式人生 > >summernote富文字域

summernote富文字域

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的單引號衝突導致報錯。