学习要点:
1.编辑器简介
2.引入uEditor
编辑器,一般用于类似于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();