zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [C/C++ IDE] CLion 配置使用教程
    PyCharm安装使用教程
    SMALI语法大全
    SMALI语法入门教程
    Samba + DLAN 实现电视机播放电脑文件
    深入浅出讲解低功耗蓝牙(BLE)协议栈
    吐血推荐珍藏的Visual Studio Code插件
    为什么我推荐你用 Ubuntu 开发?
    WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体
    C# Task的简单使用
  • 原文地址:https://www.cnblogs.com/dreampursuer/p/5538882.html
Copyright © 2011-2022 走看看