Bootstrap富文本编辑器-bootstrap-wysiwyg
在进行英语试题的录入中,因为英语试题经常会有类似如下的试题:
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的更多相关文章
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Jquery的bootstrap在线文本编辑器插件Summernote
http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
- Quill – 可以灵活自定义的开源的富文本编辑器
Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- 重构wangEditor(web富文本编辑器),欢迎指正!
提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...
- 我为什么要做富文本编辑器【wangEditor5个月总结】
请访问wangEditor官网:www.wangEditor.com ----------------------------------------------------------------- ...
- 商城项目整理(四)JDBC+富文本编辑器实现商品增加,样式设置,和修改
UEditor富文本编辑器:http://ueditor.baidu.com/website/ 相应页面展示: 商品添加: 商品修改: 前台商品展示: 商品表建表语句: create table TE ...
- SummerNote 富文本编辑器 - Rails 集成
使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...
- summernote富文本编辑器
下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...
随机推荐
- SeaJS:一个适用于 Web 浏览器端的模块加载器
什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...
- P1262 间谍网络 (tarjan缩点 水过去)
题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他们就愿意交出手中掌握的全部情报 ...
- [1]字符串按中文符占3位进行指定长度剪切[2]Double类型截取指定长度(指定长度=整数位+小数位)
/** 将中文字符串剪切为在当前db2(编码GBK)中所占用的长度*/ public String cutStringForDb2(String src,Integer size) { int len ...
- Unix下5种I/O模型
Unix下I/O模型主要分为5种: (1)阻塞式I/O (2)非阻塞式I/O (3)I/O复用(select和poll) (4)信号驱动式I/O (5)异步I/O 1.阻塞式I/O模型 unix基本的 ...
- Maven安装与配置及使用
下载及安装 官方下载地址:直达官网下载页面 进入下载页面后,根据你电脑所装jdk版本选择对应版本的maven进行下载. 我们可以看到该页上边红框内写明了,maven3.3版以上支持的是JDK1.7+的 ...
- UVA 11796
题意: 有两个狗, 按照 多边形跑,不知道两条狗的速度,但是狗是同时出发,同时到达终点的 输出两条狗的 最大相距距离 - 最小相距距离: 思路 : 用物理的相对运动来计算, 每次只计算 两条狗的直线 ...
- win2008 C盘清理
需要在Windows Server 2008上安装“桌面体验”才能使用磁盘清理工具,安装“桌面体验的”的具体步骤如下: 1. 打开“服务器管理器”——在“功能摘要”下,单击“添加功能”. 2. ...
- 轻松搞懂elasticsearch概念
本文主要介绍elasticsearch6.0的一些基本概念,有助于深入理解.研究elasticsearch和elk系统 一图胜千言 elasticsearch与mysql参照来看 添加一条数据 紫 ...
- mabytis的xml一些写法
1.jdbcType=TIMESTAMP 而不是 jdbcType=DATETIME myabtis 3.4.6 版本jar包中:jdbcType枚举: ARRAY(Types.ARRAY), BIT ...
- 在Winform开发框架中实现对数据库的加密支持(转)
在很多情况下,我们需要对数据库进行加密,特别是Access数据库.Sqlite数据库,这些直接部署在客户端的数据,因为数据也是客户的资产,数据库总是存在很多相关的秘密或者重要的业务数据,所以一般来说, ...