ueditor插件 -- 插入填空题

插入填空题,一个看似小小的需求,但是却是折腾了很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

ueditor插件 -- 插入填空题的相关文章

moodle中的完形填空题的文本编写方法

moodle中的完形填空题的文本编写方法 [完形填空题]考题把一段文字挖去一些空,让考生根据上下文正确地完成这些填空.完型填空题中的一段短文可以包括各种题目,如选择,填空,和数字题等. 题目的编辑是在编辑页面中输入一些按照完形填空的书写格式的文本. 下面介绍完型填空题的几种题型的书写方法: 完形选择题: 书写格式{1(分数):MULTICHOICE(题型):错误答案#对该错误答案的反馈~另一个错误答案#对另一个错误答案的反馈~=正确答案#对该正确答案的反馈~P%可信度一半的答案#对该可信度一半的

Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题 前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的.然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2! 图1 图2 很好!下面看一下如何解决这个问题. 1.首先你可以到官网Ueditor,查看很详细的文档

北京大学C++程序设计coursera课程第四周编程填空题3

题目 填空题-3 1 point possible (graded) 总时间限制: 1000ms 内存限制: 65536kB 描述 写一个二维数组类 Array2,使得下面程序的输出结果是: 0,1,2,3, 4,5,6,7, 8,9,10,11, next 0,1,2,3, 4,5,6,7, 8,9,10,11, 程序: #include <iostream> #include <cstring> using namespace std; // 在此处补充你的代码 int mai

Linux 中常见的填空题

一.填空题: 1. 在Linux系统中,以文件方式访问设备 . 2. Linux内核引导时,从文件/etc/fstab中读取要加载的文件系统. 3. Linux文件系统中每个文件用i节点来标识. 4. 全部磁盘块由四个部分组成,分别为引导块.专用块. i节点表块和数据存储块. 5. 链接分为:硬链接和符号链接. 6. 超级块包含了i节点表和空闲块表等重要的文件系统信息. 7. 某文件的权限为:d-rw-_r--_r--,用数值形式表示该权限,则该八进制数为:644,该文件属性是目录. 8. 前台

算法笔记_116:算法集训之代码填空题集三(Java)

 目录 1 数组转置 2 文件管理 3 显示为树形 4 杨辉三角系数 5 圆周率与级数 6 整数翻转 7 自行车行程 8 祖冲之割圆法 9 最大5个数 10 最大镜像子串   1 数组转置 编写程序将2行3列的数组行列置换复制给3行2列的数组(即数组的转置).已经写了如下代码,请完善之: class y{ public static void main(String[] args) throws Exception { int a[][]={{1,2,3},{4,5,6}}; int b[][]

算法笔记_113:算法集训之代码填空题集一(Java)

 目录 1 报数游戏 2 不连续处断开 3 猜数字游戏 4 串的反转 5 串中找数字 6 递归连续数 7 复制网站内容 8 股票的风险 9 基因牛的繁殖 10 括号的匹配   1 报数游戏 有n个孩子站成一圈,从第一个孩子开始顺时针方向报数,报到3的人出列,下一个人继续从1报数,直到最后剩下一个孩子为止.问剩下第几个孩子.下面的程序以10个孩子为例,模拟了这个过程,请完善之(提示:报数的过程被与之逻辑等价的更容易操作的过程所代替). Vector a = new Vector(); for(in

蓝桥杯之填空题集合1

1.最小公倍数 求两个数字的最小公倍数是很常见的运算.比如,3和5的最小公倍是15.6和8的最小公倍数是24.下面的代码对给定的两个正整数求它的最小公倍数.请填写缺少的代码,使程序尽量高效地运行. 把填空的答案(仅填空处的答案,不包括题面)存入考生文件夹下对应题号的“解答.txt”中即可. 1 int f(int a, int b) 2 { 3 int i; 4 for(i=a;;______) 5 { 6 if(i%b==0) return i; 7 } 8 } 参考答案:i+=a 或者 i

程序设计实习MOOC / 继承和派生——编程作业 第五周程序填空题1

描述 写一个MyString 类,使得下面程序的输出结果是: 1. abcd-efgh-abcd- 2. abcd- 3. 4. abcd-efgh- 5. efgh- 6. c 7. abcd- 8. ijAl- 9. ijAl-mnop 10. qrst-abcd- 11. abcd-qrst-abcd- uvw xyz about big me take abcd qrst-abcd- 要 求:MyString类必须是从C++的标准类string类派生而来.提示1:如果将程序中所有 "My

第十六周oj刷题——Problem K: 填空题:类模板---求数组的最大值

Description 类模板---求数组的最大值 找出一个数组中的元素的最大值,数组大小为10.(用类模板来实现) 数组元素类型作为类模板的参数. Input 10个int型数据 10个double型数据 10个char型数据 10gestring型数据 Output 10个int型数据的最大值 10个double型数据的最大值 10个char型数据的最大值 10个string型数据的最大值 Sample Input 1 3 5 7 9 8 6 4 2 0 1.2 3.4 5.66 7.8 9