Выделение текста с морды

by yoowordpress

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="http://tinymce.cachefly.net/4.2/skins/lightgray/skin.min.css">
<script src="http://www.tinymce.com/js/tinymce_3_x/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script src="http://www.tinymce.com/js/tinymce_3_x/jscripts/tiny_mce/tiny_mce_jquery.js"></script>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis dui a lectus porttitor laoreet ut ac arcu. Etiam ut quam odio. Sed lobortis dapibus libero hendrerit blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed libero quam, quis condimentum dolor. Aliquam erat volutpat. Aliquam quis lacinia erat. Nam faucibus malesuada erat. Aliquam at diam mollis dui fermentum placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 <p>Praesent cursus, elit quis commodo aliquet, tortor orci pellentesque arcu, in sollicitudin urna orci at libero. Sed lobortis orci ut metus bibendum non varius augue suscipit. Maecenas eget felis mi. Duis ac tortor lectus, quis suscipit mauris. <img src="https://developers.google.com/drive/images/drive_icon_mono.png"> Donec luctus ornare est eget mollis. Duis quis ultrices lacus. Quisque hendrerit semper magna, vitae consequat sem porta quis. Nunc pellentesque elit in sem luctus pulvinar. Pellentesque non justo eros. Cras sodales volutpat nulla, et gravida est faucibus eu. Nam non pulvinar tortor. Aliquam erat volutpat. Nam vehicula elit accumsan nisl fringilla sit amet viverra nibh convallis. Ut velit turpis, scelerisque nec volutpat sit amet, vestibulum in arcu. Pellentesque semper arcu pretium lorem convallis accumsan. Donec egestas risus vitae est vulputate elementum.</p>
 <p>Phasellus euismod cursus egestas. Nunc at...

CSS

body{
margin:10px; padding:10px;
}
#tiny-p{
    width:700px;
    height:150px;
}
#alert {
    position:absolute; 
    display:none;  
    background:#fff;
    cursor: pointer;
    border:1px solid #ccc;
    color: #333;
    font: bold 14px arial;
    padding:5px 15px;
}
 
#alert:hover{
    background:#ED93A7;
}
 
 
.twrap{
    position:relative; 
    width:920px;
    margin:10px auto; 
    height:auto; 
}
 
#replytext{
    position:relative; 
    width:600px;
    margin:0;
    height:150px; 
}

.edit-block{
    display:none;
    z-index:2;
    position: fixed;
    top: 25px;
    left: 0;
}

#mack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
    z-index:1;
    display:none;
}

JavaScript

jQuery(function($) {
   /**
    * Текст с тегами
    */
    function getSelectionBoundaryContainerElement(start) {
    var container = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(start);
            container = range.startContainer;
            if (container.nodeType != 1) {
                container = container.parentNode;
            }
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        textRange.collapse(start);
        container = textRange.parentElement();
    }
    return container;
}
    
    var $txt = '';
    /**
     * Получение текста вывод окна команды
     */
    $('.content').bind("mouseup", function(e){
        $txt = getSelectionBoundaryContainerElement().outerHTML;
        if    ($txt!='' && $txt !='undefined'){
            $('#alert').css({'display':'block', 'left':e.pageX+'px', 'top':e.pageY+5+'px'});
        }
    });
     
   /**
    * Закрытие окна команды
    */
    $(document).bind("mousedown", function(){
        $('#alert').css({'display':'none'});
    });
     
   /**
    * Вызов едитора
    */
    $('#alert').bind("mousedown", function(){
       alert($txt)
        tinyMCE.activeEditor.setContent($txt + 'html');
        $('.edit-block,#mack').css({'display':'block'});
    });
    
   /**
    * Закрытие всего
    */
    $(document).on('click','#mack', function(){
        $('#tiny-p').val('');
        $('.edit-block,#mack').css({'display':'none'});
    });
    
   /**
    * Активация редактора
    */
   $('#tiny-p').tinymce({
   script_url : 'http://moxiecode.cachefly.net/tinymce/v9/js/all.min.js',
   });
     
});