JSFiddle - React, Tailwind, and code Playground

by Shobhit Sharma

HTML

<div id="editor_gest">
      <div id="for_toolbar"></div>
      <br />
      <div id="toolbar2"></div>
      <br />
      <div id="oContent">Questo testo è editabile!</div>
      </div>

CSS

.editor{ border:1px solid #999; cursor:pointer; margin-right:5px; display:inline-block; width:22px; height:22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDFDFD), to(#F4F5F5));}
.editor:hover{background-color:#E1E6E8; border-color: #316AC5; border-color:#000000}
.br{ color:#eee; width:14px; height:14px}
.evid_border{ border:1px solid #FF0000;}
#editor_gest .area{ border:1px solid #000; padding:3px; height:300px; width:99%; overflow:auto; background-color:#FFFFFF; color:#000000; font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:14px }
.td_edit{background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#DFDFDF), from(#F4F5F5));}

JavaScript

var MooEditor = new Class({
                
        /* implements */        
        Implements: [Events],
        
        /* initialization */
        initialize: function(id) {
            
            this.doc = $(id);
            this.doc.set('contentEditable',true)
            this.doc.addClass('area');
            this.path_img  = "http://www.jaaxo.it/views/img_admin/";
            this.toolbar   = $('for_toolbar');
            this.toolbar2  = $('toolbar2');
            this.text      = this.doc.get('html');
            this.view      = false;
            this.br_img    = this.path_img+'/br.png';
            this.hideBR    = false;

            
            var self = this;
            
            //firefox
            if(Browser.Engine.gecko) this.styleWithCSS.delay(100);
            
            this.doc.addEvent('keydown', function(event){
                    
                    var edoc = '<br>&para;'
                              
                    if(event.key == 'enter'){ 
                        if(Browser.Engine.webkit){ // Google Chrome - Safari
                              
                              document.execCommand('inserthtml',false,edoc);
                              //self.hide_br();
                              //self.hide_br.delay(500)
                              this.hideBR = true;
                              return false;
                              
                        } else if(Browser.Engine.trident){ // IE
                        
                              var range = document.selection.createRange();
                              range.pasteHTML(edoc);
                              this.hideBR = true;
                              return false;
                        }
                        
                    
                    }else{
                        if(!event.shift && !event.control && !event.alt && this.hideBR){
                            
                          ...