Плагин для редактора SummerNote не работает должным образом

$(function() { // DOM loaded    
       $('#summernote').summernote();
       $('.popupinfo').draggable({containment: "#containment-wrapper", scroll: false});
               var openPopup = function(e) { // Function to open the popup
                $(e).fadeIn(400);
                $('#mask, .popupinfo').fadeIn(400);
               };    

                var closePopup = function() { // Function to close the popup
                    $('#mask, .popupinfo').fadeOut(400);
                };    

                $('a.open').click(function(e) {

                    e.preventDefault();
                    var popupbox = $(this).attr('href');
                    openPopup(popupbox);

                    var popMargTop = ($(popupbox).height()+24)/2;
                    var popMargLeft = ($(popupbox).width()+24)/2;
                    $(popupbox).css({
                        'margin-top': -popMargTop,
                        'margin-left': -popMargLeft
                    });
                });    

                $('a.close, #mask').on('click', function() {
                    closePopup();
                });

                $(document).keyup(function(e) {
                    if (e.keyCode == 27) {
                        closePopup();
                    }
                });    
       });

body {
    background: #e2e2e2;
    margin: 0px;
    padding: 0px;
    color: #fff;
}

.popupinfo {
   display: none;
  background: #e2e2e2;
    padding: 15px;
    border: 1px solid #1852fd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    z-index: 99999;
    box-shadow: 0px 0px 4px #1852fd;
    -moz-box-shadow: 0px 0px 4px #1852fd;
    -webkit-box-shadow: 0px 0px 4px #1852fd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#mask {
    display: none;
    background: #9ACD32;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 88888;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet"/>


<div id="mask"></div>

<div class="clearfix">
    <a href="#popup-box" class="btn btn-circle btn-sm default">
        Open <i class="fa fa-user"></i>
    </a>
</div>

 <div id="popup-box" class="popupinfo">
    <form>
        <div name="summernote" id="summernote" cols="30" rows="10"></div>
    </form>
</div>