20151225jquery学习笔记---编辑器插件

编辑器（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();