- 浏览: 8369 次
- 性别:
- 来自: 广州
最新评论
-
caoxiaoj2ee:
共同研究 把这个控件做好
发布基于JQuery一个考试题型编辑器插件,目前只做了几个功能,还请大牛仍砖! -
yanghui628:
william_ai 写道抛出异常的爱 写道线下这个成本比较高 ...
一个互相交流互相学习的方法,请大伙评价可行性! -
william_ai:
抛出异常的爱 写道线下这个成本比较高......
大牛就不说了 ...
一个互相交流互相学习的方法,请大伙评价可行性! -
zhangjie.0211:
huiseyiyu 写道现在的牛人,感觉都是脾气牛,记得我很早 ...
一个互相交流互相学习的方法,请大伙评价可行性! -
huiseyiyu:
现在的牛人,感觉都是脾气牛,记得我很早的时候去华为面试,面试中 ...
一个互相交流互相学习的方法,请大伙评价可行性!
注册javaeye两年了,一直没敢发过帖子,怕自己的技术太差。今天特意把自己目前做的一个考试题型编辑器插件发布上来,目前支持单选题,预览,上传附件,支持对视频音频文件的播放。
有同学问我,是基于一个什么业务的。其实是最近可能要做一个考试系统,需要这样的编辑器,然后找了很久都没有找到,就自己写了。后来想可能还会有人需要,就发布上来了。
希望各位大拿多多指教。本人文采不好就直接代码了:
图片:
附近是图片以及源码:[/b]
其实我说能公布代码意思就是贡献出来,让大家都了解下。
这个网站其实我看过,但是其不开源而且并不支持视频音频。不过作为参考还是可以,谢谢你的建议。
这是我的失误,不好意思。
谢谢支持,最后弄完我会继续发布上来。
其实是因为最近需要做一个在线考试系统,需要一个这样的编辑器,然后找了很久都没有找到,就自己写了。
有同学问我,是基于一个什么业务的。其实是最近可能要做一个考试系统,需要这样的编辑器,然后找了很久都没有找到,就自己写了。后来想可能还会有人需要,就发布上来了。
希望各位大拿多多指教。本人文采不好就直接代码了:
/* ------------------------------------------------------------------- // 作者:yanghui527@126.com // 时间:2011/05/06 // 描述:这是一个基于jquery的题型编辑器 // ------------------------------------------------------------------*/ (function($){ //公共编辑ID var editorId = "editorHtml"; //文件上传FormID var uploadFormId; //上传文件的格式 var uploadFileFormat = "flv|swf|m4v|mp3|jpg|png|bmp|gif"; //当前点击的菜单 var clickmenu; //获取时间戳,用于一些元素ID的设置,避免命名冲突 var timestamp = new Date().getTime(); //用于截取题型选项顺序 var questionsTitles = "ABCDEFGHIGKLMNOPQRSTUVWXYZ"; //设置插件路径 var pluginPath = getPluginPath(); //加载相关联的插件 initPluginFile (); var defaults = {}; /** * 初始化编辑器 */ $.fn.editor = function(options){ var object = $(this); if (object.attr("tagName") != "DIV") { return; } $.extend(defaults, options); delete options; object.addClass("Container"); var header = $("<div class='Header'></div>"); $.each(plugins(), function (i, value){ header.append(value); }); object.append(header); object.append("<div class='Editor' id='" + editorId + "'></div>"); //加载左键菜单 object.append(getContextMenu()); //加载文件上传控件 uploadFormId = loadUploadFile(); }; /** * 初始化编辑器 */ $.fn.editorPlayer = function (isAuto){ $(this).flowplayer(pluginPath + "/plugins/flowplayer/flowplayer-3.2.7.swf", { clip: { autoPlay: isAuto, autoBuffering: true }, onLoad : function() { this.setVolume(100); } }); }; /****************************************相关联的插件加载功能实现区***************************************************/ /** * 初始化插件js文件 */ function initPluginFile () { $("script[src]:last").after("<script src='" + pluginPath + "/plugins/jquery.DOMWindow.js'></script>"); $("script[src]:last").after("<script src='" + pluginPath + "/plugins/jquery.contextmenu.r2.js'></script>"); $("script[src]:last").after("<script src='" + pluginPath + "/plugins/flowplayer/flowplayer-3.2.6.min.js'></script>"); $("script[src]:last").after("<script src='" + pluginPath + "/plugins/jqueryform.js'></script>"); } ; /** * 获取插件路径 */ function getPluginPath () { var filePath = $("link[href *= edtior/style.css]:first").attr("href"); filePath = filePath.substring(0, filePath.lastIndexOf("\/")); return filePath; } /****************************************编辑器功能实现区***************************************************/ /** * 实例化编辑器插件 */ plugins = function () { var defaultPlugin = { 'radioSelect' : function (visible) { return $.radioSelect(visible);}, 'uploadFile' : function (visible) { return $.uploadFile(visible); }, 'preview' : function (visible) { return $.preview(visible); } }; var array = new Array(); if ( defaults && defaults.controls ) { var controls = defaults.controls; delete defaults.controls; $.each(controls, function (i, type) { var visible = typeof(type.visible) == "undefined" ? true : type.visible; if (typeof(defaultPlugin[i]) != "undefined") { array.push($(defaultPlugin[i](visible))); delete defaultPlugin[i]; } delete visible; }); } $.each(defaultPlugin, function(i, value) { array.push($(value(true))); }); return array; }; /** * 单选题 * @param isHide 是否显示 */ $.radioSelect = function(isHide) { var radio = $("<a href='javascript:void(0)' title ='单选题' class='HeaderButton1'> </a>"); if (!isHide) { radio.hide(); return radio; } radio.bind({ click: function() { addQuestion("radio"); } }); return radio; }; /** * 预览 * @param isHide 是否显示 */ $.preview = function(isHide) { var preview = $("<a href='javascript:void(0)' title ='预览' class='preview'> </a>"); if (!isHide) { preview.hide(); return preview; } preview.bind({ click: function() { var div = windowHead(); cloneEditor().appendTo(div); openWindos (div, $(document).height() * 0.9, $(document).width() * 0.91); } }); return preview; }; /** * 文件上传 * @param isHide 是否显示 */ $.uploadFile = function(isHide) { var uploadFile = $("<a href='javascript:void(0)' title ='上传文件' class='upload'> </a>"); if (!isHide) { uploadFile.hide(); } return uploadFile; }; /****************************************左键功能实现区***************************************************/ /** * 菜单 */ getContextMenu = function () { var contextMenu = typeof(defaults.contextMenu) == "undefined" ? "": defaults.contextMenu; return $("<div class='contextMenu' id='myMenu'><ul>" + "<li id='contextMenudelete'><img src='" + contextMenu.deleteImg + "' /> 删除</li>" + "<li id='contextMenuadd'><img src='" + contextMenu.deleteImg + "' /> 添加选项</li>" + "<li id='contextMenuslave'><img src='" + contextMenu.deleteImg + "' /> 添加附件</li>" + "</ul></div>").hide(); }; /** * 菜单事件绑定 */ contextMenuEvent = function () { return { 'contextMenudelete': function(t) { $(t).nextAll().each(function (i, value) { var questionRow = $(value).find("table:first tr:first span"); questionRow.text(questionRow.text() - 1); }); $(t).remove(); }, 'contextMenuadd': function(t) { //获取最后一个选项 var lastQuestion =$(t).find("input[name=answerQuestions" + timestamp + "]:last").parents("tr:first"); var cloneQuestion = lastQuestion.clone(); cloneQuestion.find("input:checked").removeAttr("checked"); cloneQuestion.find("input:text").val(""); cloneQuestion = $("<tr>" + cloneQuestion.html() +"</tr>"); lastQuestion.after(cloneQuestion); var index = questionsTitleIndexOf(cloneQuestion.find("input:first").val()); var questionsTitle = questionsTitles.substring(index + 1, index + 2); cloneQuestion.find("td:first input:first").val(questionsTitle); cloneQuestion.find("span").text(questionsTitle); }, 'contextMenuslave': function(t) { showUploadFile(); clickmenu = t; } }; }; /****************************************文件上传功能实现区***************************************************/ /** * 加载文件上传Form */ loadUploadFile = function () { if (defaults && defaults.uploadFile) { var uploadFile = defaults.uploadFile; if (typeof(uploadFile.formId) != 'undefined') { var uploadoptions = { type : 'post', beforeSubmit : function (obj) { var file = $(uploadFile.formId).find("input[type=file]:first"); var fileName; $.each(obj, function (i, val) { if (val.name == file.attr("name")) { fileName = val.value; return false; } }); if (isChinese(fileName.substring(fileName.lastIndexOf("\\") + 1))) { alert("文件名不能包含中文!"); return false; } if (uploadFileFormat.indexOf(fileName.substring(fileName.lastIndexOf(".") + 1)) == -1) { alert("格式不支持,仅仅支持" + uploadFileFormat); return false; } }, success : function(response, status) { addPreviewslave(response.replace(/<.*?>/g,'').replace(/\\/g, "/")); }, error : function() { aletr("文件上传失败!"); } }; $(uploadFile.formId).ajaxForm(uploadoptions); $(uploadFile.formId).hide(); delete defaults.uploadFile; return uploadFile.formId; } } return null; }; /** * 显示上传窗口 */ showUploadFile = function () { if (typeof(uploadFormId) == 'undefined' || uploadFormId == null) { alert("文件上传控件没有初始化"); return; } openWindos ($("<div></div>") .append($(uploadFormId).clone(true).show() .append($("<p aling='center'></p>") .append($("<input type='submit' value='确定'>")) .append($("<input type='button' value='取消' class='closeDOMWindow'>"))) ), 100, 400); }; /** * 添加附件预览 */ addPreviewslave = function (result) { if (typeof(clickmenu) != "undefined") { var fileName = result.substring(result.lastIndexOf("/") + 1, result.length); var oldtr = $(clickmenu).find("table:last tr:last"); var slave = $("<tr></tr>").append($("<td colspan='2' align='left'></td>") .append($("<a href='javascript:void(0);'></a>") .attr("title", result) .text(fileName) .bind({ click: function () { var div = windowHead(); div.append(addPlayer(this.title, true)); openWindos(div, 350, 500); } }) ) ); oldtr.after(slave); } $.closeDOMWindow(); }; /** * 添加播放器 * @param href 播放文件路径 * @param isAuto 是否自动播放 */ addPlayer = function (href, isAuto) { var player = $("<a id='player' style='text-align: center; display: block; width: 495px; height: 330px'></a>"); player.attr("href", href); player.editorPlayer(isAuto); return player; }; /****************************************辅助功能实现区***************************************************/ /** * 添加选项 * @param type 选项类型 */ addQuestion = function (type) { var div = $("<div class='Questions'></div>"); var table = $("<table class='wording'></table>"); table.append("<tr>" + "<td width='20'><span>" + getEditorAreaLength() + "</span>.</td>" + "<td><textarea></textarea></td></tr>"+ "<tr><td></td><td><table>" + "<tr><td width='44'>" + "<input type='" + type + "' name='answerQuestions" + timestamp + "' value='A' onclick='$.setAnswers(this);'>" + "<span>A</span></td><td><input type='text' size='80'></td>" + "</tr>" + "<tr id='previewRemove" + timestamp + "'><td>答案:<span><B> </B></span></td><td></td></tr>" + "<tr id='previewRemove" + timestamp + "'><td>分数:</td><td><input type='text'></td></tr>" + "</table>" + "</td></tr>"); div.append(table); div.bind({ mouseover: function() { $(this).addClass("Question"); }, mouseout: function(){ $(this).removeClass("Question"); } }); div.contextMenu("myMenu", { bindings: contextMenuEvent() }); $("#editorHtml").append(div); }; /** * 克隆编辑器的内容并且优化 */ cloneEditor = function () { //克隆问题html var previewHtml = $("#" + editorId).clone(); $.each(previewHtml.find("#previewRemove" + timestamp), function (i, value) { $(value).remove(); }); if ($.browser.mozilla) { $.each($("#" + editorId).find("textarea"), function (i, value) { $(previewHtml.find("textarea")[i]).val($(value).val()); }); } previewHtml.css("height" , $(document).height() * 0.85); previewHtml.css("width" , $(document).width() * 0.89); $.each(previewHtml.find("div"), function (i, div){ $.each($(div).find("a"), function(i, a) { $(div).find("td:last").append(addPlayer($(a).attr("title"), false)); $(a).remove(); }); }); $.each(previewHtml.find("textarea, :text"), function (i, value) { $(value).after($(value).val()); $(value).remove(); }); return previewHtml; }; /** * 获取在选项描述中的位置 */ questionsTitleIndexOf = function (string) { return questionsTitles.indexOf(string); }; /** * 获取编辑区域长度 */ getEditorAreaLength = function () { return ($("#" + editorId + " div").length + 1); }; /** * 封装打开窗口 * @param object 窗口内容对象 * @param height 高度 * @param width 宽度 */ openWindos = function (object, height, width) { $.openDOMWindow({ windowSourceID:object, height:height, width:width, borderSize:0.5, overlay:1, modal:1 }); }; /** * 弹出层窗口的头部信息 */ windowHead = function () { var p = $("<p class='closeplayer' title='关闭'> </p>"); p.bind({ click: function() { $.closeDOMWindow(); } }); return $("<div></div>").append(p); }; /** * 答案设置 */ $.setAnswers = function (obj) { $(obj).parents("table").find("span:last b").html($(obj).val()); }; /** * 验证是否存在中文 */ isChinese = function (string) { var reg = /.*[\u4e00-\u9fa5]+.*$/; return reg.test(string); }; /****************************************编辑器扩展功能实现区***************************************************/ /** * 扩展 */ $.extend($.fn.editor, { /** * 获取编辑器的内容 */ geHtml : function(){ return cloneEditor().html(); } }); })(jQuery);
图片:
附近是图片以及源码:[/b]
- edtior.rar (710.7 KB)
- 下载次数: 401
评论
16 楼
caoxiaoj2ee
2011-06-17
共同研究 把这个控件做好
15 楼
yanghui628
2011-05-30
jjq 写道
这个很简单的,就一个tab控件+kindeditor,你自己研究下,如果实在不行你再联系我吧。
其实我说能公布代码意思就是贡献出来,让大家都了解下。
14 楼
jjq
2011-05-30
这个很简单的,就一个tab控件+kindeditor,你自己研究下,如果实在不行你再联系我吧。
13 楼
yanghui628
2011-05-30
<div class="quote_title">jjq 写道</div>
<div class="quote_div">
<p>最近我也在写一个类似的东西,完全是练手,我是这样解决的,直接上图说话:</p>
<p><br><br> 因为我这里不要求上传视频,kindeditor我选用的是简单模式,而这个编辑器提供了视频和flash上传的功能,我认为这样可以符合你的要求,第一次在这里发帖,心里有点虚,不知道说得对不对,还请大家指教。</p>
</div>
<p> 这种也不错哦,能公布代码不</p>
<div class="quote_div">
<p>最近我也在写一个类似的东西,完全是练手,我是这样解决的,直接上图说话:</p>
<p><br><br> 因为我这里不要求上传视频,kindeditor我选用的是简单模式,而这个编辑器提供了视频和flash上传的功能,我认为这样可以符合你的要求,第一次在这里发帖,心里有点虚,不知道说得对不对,还请大家指教。</p>
</div>
<p> 这种也不错哦,能公布代码不</p>
12 楼
jjq
2011-05-29
<p>最近我也在写一个类似的东西,完全是练手,我是这样解决的,直接上图说话:</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/489987/e93d4564-b2a6-3e74-a1a7-cf0c82201ad3.jpg" alt=""><br> 因为我这里不要求上传视频,kindeditor我选用的是简单模式,而这个编辑器提供了视频和flash上传的功能,我认为这样可以符合你的要求,第一次在这里发帖,心里有点虚,不知道说得对不对,还请大家指教。</p>
<p><br><img src="http://dl.iteye.com/upload/attachment/489987/e93d4564-b2a6-3e74-a1a7-cf0c82201ad3.jpg" alt=""><br> 因为我这里不要求上传视频,kindeditor我选用的是简单模式,而这个编辑器提供了视频和flash上传的功能,我认为这样可以符合你的要求,第一次在这里发帖,心里有点虚,不知道说得对不对,还请大家指教。</p>
11 楼
yanghui628
2011-05-28
caoxiaoj2ee 写道
不错 有一个叫“考试酷” 的 http://www.examcoo.com/ 上面也有插件 也是基于jq做的;建议楼主参考一下
这个网站其实我看过,但是其不开源而且并不支持视频音频。不过作为参考还是可以,谢谢你的建议。
10 楼
caoxiaoj2ee
2011-05-28
不错 有一个叫“考试酷” 的 http://www.examcoo.com/ 上面也有插件 也是基于jq做的;建议楼主参考一下
9 楼
yanghui628
2011-05-28
shaomeng95 写道
建议楼主发到web技术论坛比较好
这是我的失误,不好意思。
8 楼
whaosoft
2011-05-28
额 .... 写的不错啊 呵呵 ui高手
7 楼
shaomeng95
2011-05-28
建议楼主发到web技术论坛比较好
6 楼
yanghui628
2011-05-27
ry.china 写道
你这个用在考试系统上面的插件现在也不错,希望你最后弄完了可以给出来看看
谢谢支持,最后弄完我会继续发布上来。
5 楼
ry.china
2011-05-27
你这个用在考试系统上面的插件现在也不错,希望你最后弄完了可以给出来看看
4 楼
tinalucky
2011-05-27
恩,不错,支持一下
3 楼
yanghui628
2011-05-26
chinacool_main 写道
问一下,你这个Projec想实现的业务逻辑是什么?
其实是因为最近需要做一个在线考试系统,需要一个这样的编辑器,然后找了很久都没有找到,就自己写了。
2 楼
chinacool_main
2011-05-25
问一下,你这个Projec想实现的业务逻辑是什么?
1 楼
yanghui628
2011-05-25
难道是我的方式错了?没有一个人发言吗?
相关推荐
JwySiwyg 基于jQuery插件的所见所得编辑器 JwySiwyg 基于jQuery插件的所见所得编辑器
jQuery+Bootstarp富文本编辑器插件summernote
基于jQuery的轻量级js弹窗插件。 时间不多,只实现了部分功能,后续会继续完成剩下的功能。
基于jQuery功能强大的图片查看器插件(5星级) .
这是一款使用jquery和css3制作的简单的富文本编辑器插件。该jquery富文本编辑器中带有加粗、斜体、下划线、文本居中、文本对齐、显示图片等编辑器基本功能。
一个简单,干净,优雅的所见即所得的富文本编辑器
grid-editor是一款基于Bootstrap网格系统的网格式所见即所得的jQuery文本编辑器插件。它可以通过Bootstrap排版来生成各种复杂的网格布局,每个网格中可以生成一个编辑器。
jquery插件 文本编辑器jwysiwyg ,小巧易用啊。
一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的...
jQuery多功能秒表闹钟计时器插件是一款jQuery插件跟CSS3动画效果实现的倒计时插件。
viewer是一款功能强大的图片查看器jQuery插件。它可以实现ACDsee等看图软件的功能。它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片。该图片查看器还支持移动设备,支持键盘控制,功能十分强大。
基于jquery的imgbox图片预览插件Demo源码
基于jQuery的图片点击弹窗预览大图插件
一个基于jQuery 实现的jSelectDate 下拉日期选择器插件源码
实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷...
jQuery实现Markdown编辑器插件是一款基于bootstrap的Markdown网页文本编辑器插件。
基于jquery,利用canvas自带的api,实现了一个鼠标点击对应点后,可拖动的一个插件
上次我们介绍过一款基于HTML5的图片马赛克效果,今天我们要来介绍一款基于jQuery的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的...
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
基于jquery的日历日程插件,包含24节气,美观大气,操作简单,可用于基于日历日程类的web系统开发