JSFiddle - React, Tailwind, and code Playground

by Alexandre Jazara

HTML

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

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;}
#editorHTML textarea{width:99%;height:12px;display:block;font-family:sans-serif!important;font-size:12px;font-weight:400;}

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+= '</div>';
caixaEditor+= '<div class="area_editor editor_'+class_limpa+'" contenteditable="true">EDITOR</div>';
caixaEditor+= '<div class="area_status status_'+class_limpa+'"><span>&nbsp;</span></div>';
$('.'+class_limpa).prepend(caixaEditor);
/* ## copia dados digitados para dentro do textarea ## */
recebe_dados = $('#'+class_limpa+'').html();
$('.editor_'+class_limpa+'').html(recebe_dados);
/* ## passando dados digitados para textarea ## */
$('.editor_'+class_limpa+'').focus(function(e){
	$(this).on("keyup",function(){
  	$('#'+class_limpa+'').html($(this).html());
    $('.status_'+class_limpa+' span').show().html("Digitando...");
  });
  
});


};
})(jQuery);


$("#caixa_texto1").editor_jasa();
$("#caixa_texto2").editor_jasa();

/* ## BIU ##*/
function biu(origem,qual){
//alert(origem+' '+qual);
    const strongElement =...