小而巧的富文本编辑器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">
                <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
            </ul>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn" data-edit="bold"
                title="Bold (Ctrl/Cmd+B)">
                <i class="icon-bold"></i>
            </button>
            <button type="button" class="btn" data-edit="italic"
                title="Italic (Ctrl/Cmd+I)">
                <i class="icon-italic"></i>
            </button>
            <button type="button" class="btn" data-edit="strikethrough"
                title="Strikethrough">
                <i class="icon-strikethrough"></i>
            </button>
            <button type="button" class="btn" data-edit="underline"
                title="Underline (Ctrl/Cmd+U)">
                <i class="icon-underline"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn" data-edit="insertunorderedlist"
                title="Bullet list">
                <i class="icon-list-ul"></i>
            </button>
            <button type="button" class="btn" data-edit="insertorderedlist"
                title="Number list">
                <i class="icon-list-ol"></i>
            </button>
            <button type="button" class="btn" data-edit="outdent"
                title="Reduce indent (Shift+Tab)">
                <i class="icon-indent-left"></i>
            </button>
            <button type="button" class="btn" data-edit="indent"
                title="Indent (Tab)">
                <i class="icon-indent-right"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn" data-edit="justifyleft"
                title="Align Left (Ctrl/Cmd+L)">
                <i class="icon-align-left"></i>
            </button>
            <button type="button" class="btn" data-edit="justifycenter"
                title="Center (Ctrl/Cmd+E)">
                <i class="icon-align-center"></i>
            </button>
            <button type="button" class="btn" data-edit="justifyright"
                title="Align Right (Ctrl/Cmd+R)">
                <i class="icon-align-right"></i>
            </button>
            <button type="button" class="btn" data-edit="justifyfull"
                title="Justify (Ctrl/Cmd+J)">
                <i class="icon-align-justify"></i>
            </button>
        </div>
        <div class="btn-group" role="group">
            <div class="btn-group" role="group">
                <button type="button" class="btn dropdown-toggle"
                    data-toggle="dropdown" title="Hyperlink">
                    <i class="icon-link"></i>
                </button>
                <div class="dropdown-menu">
                    <div class="input-group" style="margin: 0 5px; min-width: 200px;">
                        <input class="form-control" placeholder="URL" type="text"
                            data-edit="createLink" /> <span class="input-group-btn">
                            <button class="btn" type="button">Add</button>
                        </span>
                    </div>
                </div>
            </div>
            <button type="button" class="btn" data-edit="unlink"
                title="Remove Hyperlink">
                <i class="icon-cut"></i>
            </button>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn"
                title="Insert picture (or just drag & drop)" id="pictureBtn">
                <i class="icon-picture"></i>
            </button>
            <input type="file" data-role="magic-overlay"
                data-target="#pictureBtn" data-edit="insertImage" />
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn" data-edit="undo"
                title="Undo (Ctrl/Cmd+Z)">
                <i class="icon-undo"></i>
            </button>
            <button type="button" class="btn" data-edit="redo"
                title="Redo (Ctrl/Cmd+Y)">
                <i class="icon-repeat"></i>
            </button>
        </div>
    </div>

    <div id="editor"></div>
</div>

3.JS

<script>
    $(function() {
        // 初始化工具条
        initToolbarBootstrapBindings();

        $('#editor').wysiwyg();
    });

    // 初始化工具条
    function initToolbarBootstrapBindings() {
        // 字体样式
        var fonts = [ 'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact',
                'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                'Times New Roman', 'Verdana' ],
            fontTarget = $('[title=Font]').siblings('.dropdown-menu');
        $.each(fonts,function(idx, fontName) {
            fontTarget.append($('<li><a href="#" data-edit="fontName ' + fontName 
                    +'" style="font-family:\''+ fontName +'\'">' + fontName + '</a></li>'));
        });

        $('button[title]').tooltip({
            container : 'body'
        });

        // .dropdown-menu下的input事件
        $('.dropdown-menu input').click(function() {
            return false;
        })
        .change(function() {
            $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
        })
        .keydown('esc', function() {
            this.value = '';
            $(this).change();
        });

        // [data-role=magic-overlay]的样式
        $('[data-role=magic-overlay]').each(function() {
            var overlay = $(this), target = $(overlay.data('target'));
            overlay.css('opacity', 0).css('position', 'absolute')
                    .offset(target.offset()).width(target.outerWidth())
                    .height(target.outerHeight());
        });
    };
</script>

4.CSS

<style>

.editor-container { /* 编辑器容器样式 */

    padding: 25px 20px 25px;

    margin-bottom: 10px;

    background-color: #eeeeee;

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

}

 

.btn-toolbar {

    font-size: 0;

    margin-top: 10px;

    margin-bottom: 10px;

}

 

#editor { /* 编辑框样式 */

    max-height: 400px;

    height: 400px;

    width: 100%;

    background-color: white;

    border-collapse: separate;

    border: 1px solid rgb(204, 204, 204);

    padding: 4px;

    box-sizing: content-box;

    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;

    box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;

    border-top-right-radius: 3px;

    border-bottom-right-radius: 3px;

    border-bottom-left-radius: 3px;

    border-top-left-radius: 3px;

    overflow: scroll;

    outline: none;

}

 

.btn-toolbar .btn {

    /* 工具条里按钮样式，这个样式其实是.btn-default的样式，

    Button按钮之所以没有直接加上.btn-default样式是因为按钮选中后wysiwyg会给选中的按钮加.btn-info样式，

    .btn-default和.btn-info同时存在样式会冲突 */

    color: #333;

    background-color: #fff;

    border-color: #ccc;

}

 

.btn-toolbar .btn-info {

    /* 这个样式其实是.btn-info的样式，重写一遍是为了提高优先级，

    否则.btn-info的样式会被.btn-toolbar .btn覆盖，这个样式要写在.btn-toolbar .btn之下 */

    color: #fff;

    background-color: #5bc0de;

    border-color: #46b8da;

}

</style>

至此，一个bootstrap-wysiwyg-demo开发完成，页面展示如下：