|
精华帖 (0) :: 良好帖 (1) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-05-25
最后修改：2011-06-10
注册javaeye两年了，一直没敢发过帖子，怕自己的技术太差。今天特意把自己目前做的一个考试题型编辑器插件发布上来，目前支持单选题，预览，上传附件，支持对视频音频文件的播放。
有同学问我，是基于一个什么业务的。其实是最近可能要做一个考试系统，需要这样的编辑器，然后找了很久都没有找到，就自己写了。后来想可能还会有人需要，就发布上来了。 希望各位大拿多多指教。本人文采不好就直接代码了：
/* -------------------------------------------------------------------
// 作者: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]
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-05-25
难道是我的方式错了？没有一个人发言吗？
|
| 返回顶楼 | |
|
发表时间：2011-05-25
问一下，你这个Projec想实现的业务逻辑是什么？
|
| 返回顶楼 | |
|
发表时间：2011-05-26
chinacool_main 写道 问一下，你这个Projec想实现的业务逻辑是什么？
其实是因为最近需要做一个在线考试系统，需要一个这样的编辑器，然后找了很久都没有找到，就自己写了。 |
| 返回顶楼 | |
|
发表时间：2011-05-27
恩，不错，支持一下
|
| 返回顶楼 | |
|
发表时间：2011-05-27
你这个用在考试系统上面的插件现在也不错，希望你最后弄完了可以给出来看看
|
| 返回顶楼 | |
|
发表时间：2011-05-27
ry.china 写道 你这个用在考试系统上面的插件现在也不错，希望你最后弄完了可以给出来看看
谢谢支持，最后弄完我会继续发布上来。 |
| 返回顶楼 | |
|
发表时间：2011-05-28
建议楼主发到web技术论坛比较好
|
| 返回顶楼 | |
|
发表时间：2011-05-28
额 .... 写的不错啊 呵呵 ui高手
|
| 返回顶楼 | |
|
发表时间：2011-05-28
shaomeng95 写道 建议楼主发到web技术论坛比较好
这是我的失误，不好意思。 |
| 返回顶楼 | |
