HTMLEditor

// ==UserScript==
// @name           HTMLEditor
// @namespace      http://yoksel.ru/
// @description    HTMLEditor
// @include        *
// @require        https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @grant          GM_getValue
// @grant          GM_setValue
// @grant          GM_listValues
// @grant          GM_addStyle
// ==/UserScript==

GM_addStyle(".buttonsSet {\
       margin: 5px 0px 5px; \
       vertical-align: top; \
       } \
    .editor-button { \
       height: 25px; \
       margin-right: .3em; \
       vertical-align: top; \
       } \
    .comment-preview {  \
        clear:both; \
        margin: 10px 0px; \
        }     \
    .custom-item span { \
        cursor: pointer; \
    }     \
    .show-hide-control { \
        position: absolute; \
        margin-left: 120px; \
        display: block; \
        margin-top: 2rem; \
    } \
");

$.noConflict(); 
jQuery(document).ready(function($) {
    
    var buttons = [
        {
        wrapper: '<p>^^</p>',
        content: 'P'
        },
        {
        wrapper: '<b>^^</b>',
        content: '<b>B</b>'
        },
        {
        wrapper: '<i>^^</i>',
        content: '<i>I</i>'
        },
        {
        wrapper: '<mark>^^</mark>',
        content: '<mark>mark</mark>'
        },
        {
        wrapper: '<code>^^</code>',
        content: '&nbsp;&lt;code&gt;&nbsp;'
        },
        {
        wrapper: '<pre>^^</pre>',
        content: '&nbsp;&lt;pre&gt;&nbsp;'
        },
        {
        replace: '<',
        replacer: '&lt;',
        content: '&lt;...&gt;'
        }
    ];
    
    var texareasList = $("#task_description, #task_theory, #initial_html");
    
    if ( !texareasList[0] || texareasList[0].lenght == 0 ) {
        return;
    }
         
    // Add editor buttons to texareas
    $( texareasList ).each(function(id, obj){
        var outputId = 'output--' + obj.id;
        var outfield = "<div class='comment-preview'><div id='" + outputId + "'></div></div>";

        $(obj).after( outfield );//
        add_buttons(obj,"full");

        $(obj).keydown(update).keyup(update).mousedown(update).mouseup(update);
        
    });
    
    if ( !$('#task_theory').val() ){
        var initTaskList = '<ol>\n\t<li id="goal1"><span class="label ha-goal-label">Цель 1</span></li>\n</ol>'
        $('#task_theory').val( initTaskList );
    }
    
    // Add show/hide buttons to textarea
    $( 'textarea' ).each(function(id, obj){
        
        var showHideControl = $('<button type="button" class="show-hide-control" data-state="visible">Hide</button>');
        var label = $('label[for=' + obj.id + ']');        
        $(label).after( showHideControl );//    
        var state = GM_getValue( obj.id ) || 'visible';
        
        if ( state == 'hidden' ) {
            $(showHideControl).data('state', state );
            $('#' + obj.id).height('50px');
            showHideControl.html('Show');
        }
        
        $( showHideControl ).click( function (){
            if ( $(this).data('state') == 'visible' ) {
                $('#' + obj.id).height('50px');
                showHideControl.html('Show');
                state = 'hidden';
            }
            else {
                $('#' + obj.id).height('auto');
                showHideControl.html('Hide');
                state = 'visible';
            }
            
            $(this).data('state', state );
            //var colors = GM_getValue(palette_id);
            GM_setValue( obj.id, state );
        });
    });
    
    // Move save button to top
    if ( $('.form-actions') ) {
        var actionsPanelStyles = [
            'padding: 20px',
            'position: fixed',
            'top: 200px',
            'right: 65px'
            ].join(';');
        
        $('.form-actions').attr('style', actionsPanelStyles);
    }



function add_buttons(obj, type){
    var enable_buttons = true;
    
    
    

    var buttonsElem = $("<div class='buttonsSet'></div>");

    for ( var i = 0; i < buttons.length; i++ ) {
        var item = buttons[i];
        var keys = Object.keys( item );
        var elem = $('<button type="button" class="editor-button">' + item[ 'content' ] + '</button>');
        
        keys.forEach( function( key ) {
            if ( key === 'content' ) {
                return;
            }
            $(elem).attr( 'data-' + key, item[ key ] );
        });
        
        $(elem).attr( 'data-textid', obj.id );
        
        $( buttonsElem ).append( elem );
    }
    
    $(obj).before( buttonsElem );
}
    
$('.editor-button').click(function() {
    var wrapper = $(this).attr('data-wrapper');
    var replace = $(this).attr('data-replace');
    var replacer = $(this).attr('data-replacer');
    var textid = $(this).attr('data-textid');
    var obj = $('#' + textid);

    if ( wrapper ) {
        text_wrap( obj, wrapper );
    }

    if ( replace ) {
        text_replace( obj, replace, replacer );
    }
    return false;
});    

//--------------------------------------------------------------------------

function update() {
    var val = $(this).val();
    //var result = old.replace('/\s\n\s/','<br>');
    //result = result.replace(/\n/g,'<br>');

	$('#output--' + this.id).html( val );
}
    
//--------------------------------------------------------------------------

function text_replace( obj, replace, replacer ) {
    var elem = obj;
    var elem_value = $( elem ).val();
    var text_lenght = $( elem )[0].selectionEnd - $(elem)[0].selectionStart;
    
    var text_start = elem_value.substr(0,$(elem)[0].selectionStart);
    var text_end = elem_value.substr($(elem)[0].selectionEnd,$(elem).val().length);
    
    var text_src = elem_value.substr($(elem)[0].selectionStart, text_lenght);
    var text_replaced = text_src.replace(/\</g, replacer);
    var text_result = [text_start, text_replaced, text_end].join('');
    
    $(elem).val(text_result);
    return false;
}

//--------------------------------------------------------------------------

function text_wrap( obj, patt ){
    var elem = obj;
    
    console.count( 'Wrapper' );
    console.log( elem );
    
    var elem_value = $(elem).val();
    var text_lenght = $(elem)[0].selectionEnd - $(elem)[0].selectionStart;
    
    var text_start = elem_value.substr(0,$(elem)[0].selectionStart);
    var text_end = elem_value.substr($(elem)[0].selectionEnd,$(elem).val().length);
    
    var text_src = elem_value.substr($(elem)[0].selectionStart, text_lenght);
    var text_replace = patt.replace("^^",text_src);
    var text_result = text_start + text_replace + text_end;
    
    $(elem).val(text_result);
    return false;
}
});