码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-25 21:04:50      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:

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

  技术分享



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

标签:

原文地址:http://www.cnblogs.com/xiaoduc-org/p/5076862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!