插入填空题,一个看似小小的需求,但是却是折腾了很9。主要产品那边的要求,空格上面要标有序号,并且再页面当中能够同步空格答案列表。
1.ueditor插件 插件入门,官方的例子还是很简单直接的,对于我们这个功能够用了,就不做过多介绍。
2.空格序号的显示。要求显示未( 1 ),删除的时候要一起删除
方案1: 参考的QQ空间 @功能,原来是通过img的alt属性实现的,设置个下边框,这个灵活些,数字可以随意添加,只是样式上面没办法做到很好看
方案2: 直接用图片的方式,这个就是要事先出好图,没办法支持很大,不灵活
使用的方案2,项目中一道题的填空题项目也不能很多
3.填空的唯一性
方案1:通过实行维护index,有上一次的index和这一次的index,进行逻辑处理
方案2:通过uuid的方式进行相关的维护,不存在uuid属性的则新设一个
使用的方案2,uuid能确保唯一性,逻辑简单,易懂
4.列表 和 填空的对应关系
针对3的方案1,需要判断本次index和上一次的index,是新增还是删除,还是修改序列。
针对3的方案2,列表中不存在uuid的数据,则是新增,存在的就修改下索引,超出的删除。逻辑简明易懂
看看下面的效果。也可以点这里体验
插件代码入下,
function UE_UI_BLANK (editor,uiName) { UEDITOR_CONFIG = { UEDITOR_IMAGE_VISIT_URL: ‘../‘ } var s4 = function () { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); }; var getUUID = function () { return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4(); }; var hasClass = function (node, name) { return node.attrs && node.attrs["class"] && node.attrs["class"].indexOf(name) != -1; } var me = this; me.addInputRule(function (root) { $.each(root.getNodesByTagName(‘img‘), function (i, node) { if (hasClass(node, ‘question-blank-space‘)) { node.setAttr(‘onclick‘, ‘return false;‘); node.setAttr(‘ondragstart‘, ‘return false;‘); } }); }); me.addOutputRule(function (root) { var flag = false; var tab = []; $(me.body).find(‘img.question-blank-space‘).each(function (index) { this.src = UEDITOR_CONFIG.UEDITOR_IMAGE_VISIT_URL + "third-party/blank/" + ( index + 1 ) + ".png"; this.setAttribute(‘alt‘, index + 1); if (!this.getAttribute(‘uuid‘)) { this.setAttribute(‘uuid‘, getUUID()); } tab[index] = this.getAttribute(‘uuid‘); if (index > 9) { $(this).remove(); flag = true; } }) if (flag) { Win.alert(‘最多插入10个填空题‘); } var id = -1; $.each(root.getNodesByTagName(‘img‘), function (i, node) { if (hasClass(node, ‘question-blank-space‘)) { id++; node.setAttr(‘uuid‘, tab[id]); node.setAttr(‘src‘, UEDITOR_CONFIG.UEDITOR_IMAGE_VISIT_URL + "third-party/blank/" + ( id + 1 ) + ".png"); node.setAttr(‘ondragstart‘, ‘‘); node.setAttr(‘onclick‘, ‘‘); node.setAttr(‘onfocus‘, ‘‘); } }); }); var btn = new UE.ui.Button({ name: uiName, title: ‘插入填空项‘, cssRules: ‘border-bottom: 1px solid black;background: none repeat scroll 0 0 #fafafa !important;‘, onclick: function () { editor.execCommand(uiName); } }); me.commands[uiName] = { execCommand: function (cmd, latex) { if ($(me.body).find(‘.question-blank-space‘).length > 9) { alert(‘最多支持插入10个空‘); return; } me.execCommand(‘inserthtml‘, ‘<img class="question-blank-space edui-faked-music" onfocus="return false;" ondragstart="return false;" onclick="return false;"/>‘); }, queryCommandState: function (cmd) { return 0; }, queryCommandValue: function (cmd) { return false; } } return btn; };
例子页面逻辑代码如下
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link type="text/css" rel="stylesheet" href="../../../public/reset.css" > <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="editor_api.js"> </script> <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script> <script type="text/javascript" charset="utf-8" src="../third-party/blank/addBlankButton.js"> </script> <script type="text/javascript" charset="utf-8" src="../../../public/jquery-1.11.3.min.js"> </script> <style type="text/css"> body { padding: 10px; } div{ width:100%; } #count { color: #5cb85c; } table td{ border:1px solid #000; padding: 8px; } .mt10 { margin-top: 10px; } </style> </head> <body> <div> <div class="mt10">填空题个数: <span id="count"></span></div> <table class="mt10" id="blankTable"> <tr> <td width="50px">序列</td> <td width="200px">答案</td> </tr> </table> <script class="mt10" id="editor" type="text/plain" style="width:800px;height:300px;"></script> </div> </body> <script type="text/javascript"> UE.getEditor(‘editor‘,{ toolbars:[[]] }) UE.registerUI(‘blank‘, UE_UI_BLANK); UE.getEditor(‘editor‘).addListener( ‘contentChange‘, function() { var content = this.getContent(); var $tmp = $(‘<div>‘ + content + ‘</div>‘); var $fillChar = $tmp.find(".question-blank-space"); var $table = $(‘#blankTable‘); var len = $fillChar.size(); $("#count").html(len); $fillChar.each(function (index) { var $elm = $(this); var alt = index + 1; var uuid = $elm.attr("uuid"); var $tr = $table.find("tr.blank-line" + uuid); if ($tr.length == 0) {//新增的 $table.find("tr:eq(" + index + ")").after(‘<tr class="blank-line‘ + uuid + ‘" ><td>第‘ + alt + ‘空</td><td contentEditable="true"></td></tr>‘); } else if ($tr.index() != index) { $tr.find(‘td:eq(0)‘).html(‘第‘ + alt + ‘空‘); $table.find("tr:eq(" + index + ")").after($tr); } }); $table.find("tr:gt(" + len + ")").remove(); $tmp.remove(); }) </script> </html>
时间: 2024-10-18 22:03:02