Editor de Texto V2

Sem usar exeCommand

by Alexandre Jazara

HTML

<textarea id="caixa_texto1">1 minha <strong>casa</strong><br>1 minha <strong>casa</strong><br>1 minha <strong>casa</strong> não tem fronteiras de seleção<br>
</textarea>
<hr><span class='debug'></span><hr>
<textarea id="caixa_texto2">
2 minha casa não tem 
2 minha casa não tem 
2 minha casa não tem 
2 minha casa não tem </textarea>
<!---->

CSS

textarea{width:90%;display:block;height:48px;}
#editorHTML{display:block;padding:0;background-color:#f00;font-family:sans-serif!important;font-size:12px;font-weight:400;}
#editorHTML .area_barra,
#editorHTML .area_status{display:block;background-color:#999;color:#333}
#editorHTML .area_barra button{display:inline-block;margin:3px;}
#editorHTML .area_status{height:16px;}
#editorHTML .area_status span{display:block;padding:2px;font-size:12px;color:#fff;}
#editorHTML .area_editor{display:block;height:48px;background-color:#fff;color:#000;border:1px solid #999;padding:6px;font-family:sans-serif!important;font-size:12px;font-weight:400;overflow:hidden auto;}
#editorHTML textarea{width:99%;height:12px;display:block;font-family:sans-serif!important;font-size:12px;font-weight:400;}
#editorHtml .textAreaAvancado h2, #editorHtml #barraEA1 .estiloFormata2{display:block;font-size:20px;font-weight:600;line-height:1;padding:0 0 6px 0;margin:0;}
#editorHtml .textAreaAvancado h3, #editorHtml #barraEA1 .estiloFormata3{display:block;font-size:18px;font-weight:600;line-height:1;padding:0 0 6px 0;margin:0;}
#editorHtml .textAreaAvancado h4, #editorHtml #barraEA1 .estiloFormata4{display:block;font-size:16px;font-weight:600;line-height:1;padding:0 0 6px 0;margin:0;}
#editorHtml .textAreaAvancado h5, #editorHtml #barraEA1 .estiloFormata5{display:block;font-size:14px;font-weight:600;line-height:1;padding:0 0 6px 0;margin:0;}
#editorHtml .textAreaAvancado h6, #editorHtml #barraEA1 .estiloFormata6{display:block;font-size:12px;font-weight:600;line-height:1;padding:0 0 6px 0;margin:0;}

JavaScript

/* ### CÓDIGO DO EDITOR ### */
(function($){
$.fn.editor_jasa=function(ej){
	ej = $.extend({
      msg_digitacao: 'Digitando',
    }, ej||{});
    /* converter a caixa de TEXTAREA em CONTENT EDITABLE */
    var onde = $(this),
    		oID = onde.prop("id"),
        oCLA = onde.prop("class"),
        qual_trocar = '',
        class_limpa = '',
        textArea = '',
        caixaEditor, recebe_dados, status_dados;
/* ## definindo ID Mestre ## */
if(oID != ''){ qual_trocar = '#'+oID; class_limpa = oID; }
else if(oCLA != ''){ qual_trocar = '.'+oCLA; class_limpa = oCLA; }
        $('.debug').html(qual_trocar);
/* ## envelopar ## */
$('<section id="editorHTML" class="'+class_limpa+'">'+textArea+'</section>').insertBefore(qual_trocar);
textArea = $(qual_trocar).detach();
textArea.appendTo('.'+class_limpa);
/* ## Adicionar contenteditable */
caixaEditor = '<div class="area_barra barra_'+class_limpa+'">';
caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'strong\')"><strong>B</strong></button>';
caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'em\')"><em>I</em></button>';
caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'u\')"><u>U</u></button>';

caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'a\')">Link</button>';

caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'span\',\'justifyleft\');">Esquerda</button>';
caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'span\',\'justifycenter\');">Centro</button>';
caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'span\',\'justifyright\');">Direita</button>';
caixaEditor+= '<button type="button" onclick="biu(\''+class_limpa+'\',\'span\',\'justify\');">Justificado</button>';

caixaEditor+= '<select id="formatando" onchange="biu(\''+class_limpa+'\',this.value)">';
caixaEditor+= '<option selected value="sf">Sem Formatação</option>';
caixaEditor+= '<!--<option value="h1">Titítulo 1...