bootstrap-wysiwygの紹介:http://www.bootcss.com/p/bootstrap-wysiwyg/.bootstrap-wysiwygのGitHubアドレス:https://github.com/mindmup/bootstrap-wysiwyg/.bootstrap-wysiwygをダウンロードした場合、bootstrap-wysiwygの使用方法はindex.htmlを参照できます.
1.スタイル
bootstrap-wysiwygはカスタムツールバーを許可し、本稿ではbootstrap 3を使用してスタイルを実現し、フォントアイコンはFont Awesomeを使用する.ツールバーはbootstrap 3のコンポーネントボタンツールバーを使用します.画像をアップロードするスタイルに小さな問題があれば、焦らないでください.後ろのjsコードが解決します.コード:

    

        

            

                
                    
                
                

                
            

            

                
                     
                
                

                    
Huge
                    
Normal
                    
Small
                
            

            

                
                    
                
                
                    
                
                
                    
                
                
                    
                
            

            

                
                    
                
                
                    
                
                
                    
                
                
                    
                
            

            

                
                    
                
                
                    
                
                
                    
                
                
                    
                
            

            

                

                    
                        
                    
                    

                        

                             
                                Add
                            
                        
                    
                

                
                    
                
            


            

                
                    
                
                
            

            

                
                    
                
                
                    
                
            

        


        

    

2.功能

本文只实现了一些基本的功能。

添加js依赖。

jsコードを します.

    $(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());
        });
    };

3.使用
リッチテキストエディタのコンテンツを取得するのは、通常のdivコンテンツを取得するのと同じです.$("#editor").html(); HTMLタグをクリアした内容を取得:$("#editor").cleanHtml();添付効果図:
プロジェクトのダウンロード先:https://gitee.com/luckiness/bootstrap-wysiwyg-demo