富文本框與分頁

1.富文本框

• UEditor, CKEditor,wangEditor 市面用得比較多的富文本框

• 使用是的wangEditor,要學習的話能夠去看它的官網 -> http://www.wangeditor.com/

• 主要是完成文本框的展現

<div id="intro"></div>
<input type="hidden" name="intro" id="txtIntro" />
...
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script type="text/javascript">
	 var E = window.wangEditor
	 //獲取到我們的編輯器位置
     var editor = new E('#intro')
	 //獲到取相應的元素(提交的intro元素)
    //監聽編輯器的修改事件(html就是編輯器中的內容)
	 editor.customConfig.onchange = function (html) {
		 //console.debug(html)
		 //把富文框的內容放進去
		 txtIntro.val(html);
     };
     // 建立對應的編輯器
     editor.create();
</script>

2. 修改的回顯功能

2.1單選框的回顯

• 須要保存的是被選中的那一個input加上checked屬性

<div class="form-group">
	<label for="isenabled">是否啓用:</label>
	<label class="radio-inline">
		<input type="radio" name="isenabled" id="isenabled" value="true"
			<c:if test="${img.isenabled}">
				checked
			</c:if>
		>是
	</label>
	<label class="radio-inline">
		<input type="radio" name="isenabled" id="isenabled" value="false" 
			<c:if test="${!img.isenabled}">
				checked
			</c:if>
		 >否
	</label>
</div>

 2.2富文本框數據的回顯

var E = window.wangEditor
var editor = new E('#intro');
var $text1 = $('#txtIntro');
editor.customConfig.onchange = function(html) {
	// 監控變化，同步更新到 textarea
	$text1.val(html);
}
editor.create();
// 初始化 文本編輯器的內容
editor.txt.html('${img.intro}')
// 初始化對應的內容
$text1.val(editor.txt.html());

2.3 刪除功能

刪除數據的時候同時也要刪除相應的文件(圖片) file.delete()

3.分頁

• 一個系統，因爲數據量都會比較多，因此開發的時候都會作分頁功能的
• 真分頁(limit)與假分頁(內存中)
  • 真分頁:勻速，用戶體驗還能夠，用得多一點
  • 假分頁:每一次很是慢(後面就快)，還會佔內存