小而巧的富文本编辑器bootstrap-wysiwyg

关于：

bootstrap-wysiwyg 是Bootstrap小插件（5KB, < 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。

主要特色：

• 在Mac和Wndows平台上能够自动针对常用操作绑定标准热键；
• 可以通过拖拽插入图片；支持图片上传（也可以获取移动设备上的照片）；
• 语音识别输入（仅限Chrome浏览器）；
• 允许自定义工具条；不生成额外标签；支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性；
• 没有强制规定的样式 - 一切都由你做主；
• 依赖浏览器的标准特性，没有非标准代码；工具条和键盘功能均可定制，并且能够执行任何浏览器支持的命令；
• 不会自己创建一个单独的frame、备份文本区等 - 本编辑器尽量保持简单，并仅仅运行在一个DIV内；
• （可选）清除尾部空格；清除空的div和span；
• 必须运行在现代浏览器上（在Chrome 26、Firefox 19、Safari 6上经过测试，用户报告称可以在IE10上工作）；
• 支持移动设备浏览器（在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过）；

使用：

1.依赖

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="bootstrap-wysiwyg/external/jquery.hotkeys.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-wysiwyg/bootstrap-wysiwyg.js"></script>

2.页面代码

<div class="editor-container">
    <div class="btn-toolbar" role="toolbar" data-role="editor-toolbar"
        data-target="#editor">
        <div class="btn-group" role="group">
            <button type="button" class="btn dropdown-toggle"
                data-toggle="dropdown" title="Font">
                <i class="icon-font"></i><b class="caret"></b>
            </button>
            <ul class="dropdown-menu">
            </ul>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn dropdown-toggle"
                data-toggle="dropdown" title="Font Size">
                <i class="icon-text-height"></i>&nbsp;<b class="caret"></b>
            </button>
            <ul class="dropdown-menu">