溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用bootstrap-wysiwyg富文本編輯器

發(fā)布時間：2020-04-08 00:19:58 來源：網(wǎng)絡(luò) 閱讀：6128 作者：小熊跳舞 欄目：web開發(fā)

bootstrap-wysiwyg的介紹：http://www.bootcss.com/p/bootstrap-wysiwyg/ 。
bootstrap-wysiwyg的GitHub地址： https://github.com/mindmup/bootstrap-wysiwyg/ 。
如果下載了bootstrap-wysiwyg，如何使用bootstrap-wysiwyg其實(shí)可以參考index.html。

1.樣式

bootstrap-wysiwyg允許自定義工具條,本文使用bootstrap3實(shí)現(xiàn)樣式，字體圖標(biāo)使用Font Awesome。
工具條使用bootstrap3的組件按鈕工具欄<div class="btn-toolbar">。
如果上傳圖片的樣式有些小問題，別著急，后面的js代碼會解決。
代碼：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css"/>
<style>
.editor-container {/* 編輯器容器樣式 */
    padding: 10px 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;
    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{
    /* 工具條里按鈕樣式，這個樣式其實(shí)是.btn-default的樣式，
    Button按鈕之所以沒有直接加上.btn-default樣式是因?yàn)榘粹o選中后wysiwyg會給選中的按鈕加.btn-info樣式，
    .btn-default和.btn-info同時存在樣式會沖突   */
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-toolbar .btn-info {
    /* 這個樣式其實(shí)是.btn-info的樣式，重寫一遍是為了提高優(yōu)先級，
    否則.btn-info的樣式會被.btn-toolbar .btn覆蓋，這個樣式要寫在.btn-toolbar .btn之下 */
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
</style>
</head>
<body>
    <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>?<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" >
                            <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>
</body>
</html>

2.功能

本文只實(shí)現(xiàn)了一些基本的功能。

添加js依賴。

<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>

添加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 
                    +'" >' + 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>

3.使用

獲取富文本編輯器的內(nèi)容，和獲取普通div內(nèi)容一樣。
$("#editor").html();
獲取清除HTML標(biāo)簽后的內(nèi)容：
$("#editor").cleanHtml();

附上效果圖：
使用bootstrap-wysiwyg富文本編輯器

項(xiàng)目下載地址：
https://gitee.com/luckiness/bootstrap-wysiwyg-demo

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手