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>
ueditor插件 -- 插入填空题的更多相关文章
- Linux笔试常见填空题
一．填空题: 在Linux系统中,以 文件 方式访问设备 . Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. Linux文件系统中每个文件用 i节点 来标识. 全部磁盘块 ...
- YTU 2607: A代码填空题--更换火车头
2607: A代码填空题--更换火车头 时间限制: 1 Sec 内存限制: 128 MB 提交: 91 解决: 73 题目描述 注:本题只需要提交填写部分的代码,请按照C++方式提交. 假设火车有 ...
- YTU 2601: 熟悉题型——填空题（删除线性表节点）
2601: 熟悉题型--填空题(删除线性表节点) 时间限制: 1 Sec 内存限制: 128 MB 提交: 357 解决: 212 题目描述 给出一串具体长度的数据,删除指定数据. 已经给出部分代 ...
- springmvc集成Ueditor插件实现图片上传2、
一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...
- kindeditor自定义插件插入视频代码
kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...
- moodle中的完形填空题的文本编写方法
moodle中的完形填空题的文本编写方法 [完形填空题]考题把一段文字挖去一些空,让考生根据上下文正确地完成这些填空.完型填空题中的一段短文可以包括各种题目,如选择,填空,和数字题等. 题目的编辑是在 ...
- 随笔：关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题
随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题 问题来源 一位小伙伴在使用 Ueditor 插件时出错,因为用的是 php7.1 ...
- 『Python题库 - 填空题』151道Python笔试填空题
『Python题库 - 填空题』Python笔试填空题 part 1. Python语言概述和Python开发环境配置 part 2. Python语言基本语法元素(变量,基本数据类型, 基础运算) ...
- 百度编辑器ueditor插件的基本使用
注意:该插件是基于tpframe开发,请在tpframe框架上使用 插件下载地址:https://pan.baidu.com/s/1MOJbd1goQC0Bn5-7HcIdKA 插件下载下来后解压到a ...
随机推荐
- Oracle事物基础
事务 1 事务定义 数据库事务是SQL语句的组合作为一个"工作单元".要么全部完成,要么全部不做. 每个事务都有一个开始和一个结束. 2 事务开始 1. 你连接到数据库并执行DML ...
- Oracle使用imp/exop远程导入导出dmp数据
在导入导出数据之前,习惯性的检查一下,看看我们自己的机器可不可以连接远程的Oracle主机,检测方法是tnsping SERVICE_NAME.我的机器如下: C:\Users\zx>tnspi ...
- 一个周末掌握IT前沿技术之node.js篇
一个周末掌握IT前沿技术之node.js篇 http://ittechnical.sinaapp.com/node-js-and-restful-api/ NodeJS入门 http://www.n ...
- hadoop生态圈安装详解（hadoop+zookeeper+hbase+pig+hive）
-------------------------------------------------------------------* 目录 * I hadoop分布式安装 * II zoo ...
- VB.NET 内存指针和非托管内存的应用
介绍 Visual Basic 从来不像在C或C++里一样灵活的操纵指针和原始内存.然而利用.NET框架中的structures 和 classes,可以做许多类似的事情.它们包括 IntPtr, ...
- 《C++ Primer Plus 6th》读书笔记 - 第十章 对象和类
1. 过程性编程和面向对象编程 2. 抽象和类 1. 使用类对象的程序都可以直接访问公有部分,但只能通过公有成员函数(或友元函数)来访问对象的私有成员 2. 可以在类声明之外定义成员函数,并使其成为内 ...
- BZOJ 3503: [Cqoi2014]和谐矩阵( 高斯消元 )
偶数个相邻, 以n*m个点为变量, 建立异或方程组然后高斯消元... O((n*m)^3)复杂度看起来好像有点大...但是压一下位的话就是O((n*m)^3 / 64), 常数小, 实际也跑得很快. ...
- perl install module && normal module
Windows: perl -MCPAN -e shell install XML::GDOME Archive::Zip 后面继续更新... Archive usage: $obj = Arc ...
- 前端开发面试题收集 JS
前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...
- mysql错误：Error Code: 1175. You are using safe update mode and you tried to update a table……
今天遇到一个mysql错误: Error Code: . You are using safe update mode and you tried to update a table withou ...