小而巧的富文本編輯器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開發完成，頁面展示如下：