在进行英语试题的录入中,因为英语试题经常会有类似如下的试题:

My friend watches dragon boat races at the Dragon Boat Festival.(对划线部分提问)

——_______ is the Double Ninth Festival?

——It is in October.

  在上面的题目中,我们需要寻找一个能够对下划线进行编辑的富文本编辑器,同时为了能够加快编辑的速度,可以对在试题的录入中常用的几种模式进行预定义,比如——,_____符号的自动录入。

  在网上进行了一番调查之后,我们发现bootstrap-wysiwyg可以满足我们的需求。

  这个控件可以从https://github.com/steveathon/bootstrap-wysiwyg中找到(最新版)。

  在bootstrap-wysiwyg/examples/html-editor.html官方例子中可以找到相关的html编辑器的使用方式。

  在这个官方的例子中,当下载下来后会发现不能使用,主要是缺乏jquery.hotkeys.js和google-code-prettify/src/prettify.js,这些js可以从https://github.com/mindmup/bootstrap-wysiwyg/tree/master/external中获得。

  这个控件的具体使用规则比较简单,本文就不再简单赘述了,具体可以参考官网中的使用说明,没有几行代码就能简单使用了,读者可以自己尝试着看看。

  为了实现点击一个按钮就能自动输出预定好的模板文字,具体实现如下:

  <a class="btn btn-default" data-edit="insertText ____" title=""><i class="fa fa-align-justify"></i></a>

  在上面这段简单的代码中,主要是在data-edit属性中使用了insertText命令,这个命令后可以带上相关的文本参数。

  完整的命令可以参考:https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands

Bootstrap富文本编辑器-bootstrap-wysiwyg的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. Quill – 可以灵活自定义的开源的富文本编辑器

    Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...

  4. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  5. 重构wangEditor(web富文本编辑器),欢迎指正!

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  6. 我为什么要做富文本编辑器【wangEditor5个月总结】

    请访问wangEditor官网:www.wangEditor.com ----------------------------------------------------------------- ...

  7. 商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改

    UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: create table TE ...

  8. SummerNote 富文本编辑器 - Rails 集成

    使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...

  9. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

随机推荐

  1. 四重解法---P1047 校门外的树

    题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,--,L,都种 ...

  2. canvas - 简单画板

    截图: Demo:Demo 上代码:. <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. $Django 多对多-自定义第三张表 基于双下划线的跨表查询(补充)

    自定义第三张表的好处:可以定义多个字段, 缺点:查询不方便(有方法解决) 1.第三张表设置外键,联合唯一(查询不方便) class Books(models.Model): name=models.C ...

  4. ER/数据库建模工具之MySQL Workbench的使用

    参考:https://blog.csdn.net/soulandswear/article/details/60966808 待后续整理...

  5. js对数组中的数字排序

    1 前言 如果数组里面都是数字,如果用原生的sort,默认是按字符串排序的,不符合我们的要求 2 代码 方法1:添加Array的原生方法 Array.prototype.sort2 =function ...

  6. PHP针对数字的加密解密类,可直接使用

    <?phpnamespace app;/** * 加密解密类 * 该算法仅支持加密数字.比较适用于数据库中id字段的加密解密,以及根据数字显示url的加密. * @author 深秋的竹子 *  ...

  7. Net 4.5 WebSocket 在 Windows 7, Windows 8 and Server 2012上的比较

    .Net 4.5 WebSocket Server Running on Windows 7? Net 4.5 WebSocket Server 可以运行在 Windows 7,但是Net 4.5的 ...

  8. Python基础之常用模块

    一.time模块 1.时间表达形式: 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串: 1.1.时间戳(timestamp) :通常来说,时间 ...

  9. laravel 频率限制throttle

    在 Laravel 5.6 中,还引入了频率限制功能.所谓频率限制,指的是在指定时间单个用户对某个路由的访问次数限制,该功能有两个使用场景,一个是在某些需要验证/认证的页面限制用户失败尝试次数,提高系 ...

  10. 如何修改PDF文件内容,PDF怎么添加背景

    很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...