20151225jquery學習筆記---編輯器外掛

破玉發表於2015-12-25
jQuery筆記

編輯器（Editor），一般用於類似於 word 一樣的文字編輯器，只不過是編輯為 HTML
格式的。分類純 JS 型別的，還有 jQuery 外掛型別的。
一． 編輯器簡介
我們使用的 jQuery 版本比較新，但尚未全面使用 2.0 的版本，因為 IE6,7,8 被拋棄了。
而恰恰在這個時期，就出現編輯器外掛的兩極分化的局面。高階和先進的 HTML 編輯器已
經全面不支援 IE6,7,8 了， 而老版本的 HTML 編輯器， 在使用 jQuery1.10.x 版本時會發生這
樣那樣的不相容。 為此， 還需要引入 jquery-migrate-1.2.1.js 向下相容外掛才能解決一部分問
題。並且需要手動修改原始碼保證了正常執行。
二． 引入 uEditor
第一步：引入 jquery-migrate-1.2.1.js 檔案，排除編輯器低版本的問題。
第二步：把編輯器資料夾包放入根目錄下。
第三步：引入 uEditor.js 和 uEditor.css 兩個檔案。
第四步：插入 textarea，設定規定值。
第五步： jQuery 呼叫執行。

//HTML 部分程式碼
<button id="question_button">提問</button>
<form id="question" action="123.html" method="post" title="提問">
<p>
<label for="user">問題名稱： </label>
<input type="text" name="title" class="text" style="width:390px;" id="title" />
<span class="star"></span>
</p>
<p>
<textarea class="uEditorCustom" name="content">請填寫問題描述！ </textarea>
</p>
</form>
<div id="error">請登入後操作...</div>
//jQuery 部分程式碼
$('#question_button').button({
icons : {
primary : 'ui-icon-lightbulb',
},
}).click(function () {
if($.cookie('user')) {
$('#question').dialog('open');
} else {
$('#error').dialog('open');
setTimeout(function () {
$('#error').dialog('close');
$('#login').dialog('open');
}, 1000);
}
});
$('#question').dialog({
autoOpen : false,
modal : true,
resizable : false,
width : 500,
height : 360,
buttons : {
'釋出' : function () {
$(this).submit();
}
}
});
$('.uEditorCustom').uEditor();
$('#error').dialog({
autoOpen : false,
modal : true,
closeOnEscape : false,
resizable : false,
draggable : false,
width : 180,
height : 50,
}).parent().find('.ui-widget-header').hide();

　　



相關文章