JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Informacion -->
<div id="Puntos">
<input type="hidden" id="festival" value="<?php echo $this->to; ?>" />
<textarea id="info"></textarea>
</div>CSS
/* points */
div#Puntos{display:block;width:94%;}
/* editor_html */
#editor_html{display:block;width:100%;border:1px solid #eee;padding:1%;}
#editor_html hr{border-bottom:1px solid #eee;}
/* tolbar */
.editor_tolbar{display:block;width:100%;margin-bottom:1%;}
.editor_tolbar li{display:inline-block;background-color:#000;width:4%;padding:1%;border-bottom:3px solid #0af;}
.editor_tolbar li.editor_separator{background:#fff;width:0.5%;padding:0%;border:0px solid transparent;}
.editor_tolbar li input{display:block;background-color:transparent;width:100%;border:0px;cursor:pointer;}
.editor_tolbar li input:hover{-webkit-transform:scale(2,2);-moz-transform:scale(2,2);-o-transform:scale(2,2);-ms-transform:scale(2,2);transform:scale(2,2);}
/* colores */
.foreColor{position:relative;}
.foreColor div.editor_colours{display:block;background:#fff;width:150px;height:120px;position:absolute;left:-500pc;padding:10%;box-shadow:0px 0px 14px #ddd;overflow:hidden;border:5px solid #000;}
.foreColor:hover div.editor_colours{top:calc(100% + 5px);left:-50%;}
.foreColor div.editor_colours a{display:inline-block;padding:8.75%;margin:1%;float:left;cursor:pointer;}
.foreColor div.editor_colours a:hover{-webkit-transform:scale(2,2);}
/* format */
li.formatblock{background-color:#000;position:relative;}
.formatblock div.editor_format{display:block;background:#fff;width:250px;height:385px;left:-500pc;position:absolute;overflow:hidden;box-shadow:0px 0px 14px #ddd;border:5px solid #000;}
.formatblock:hover div.editor_format{top:calc(100% + 5px);left:-50%;}
.formatblock:hover div.editor_format h1{font-size:200%;}
.formatblock:hover div.editor_format h2{font-size:180%;}
.formatblock:hover div.editor_format h3{font-size:160%;}
.formatblock:hover div.editor_format h4{font-size:140%;}
.formatblock:hover div.editor_format h5{font-size:120%;}
.formatblock:hover div.editor_format h6{font-size:100%;}
...JavaScript
/*
Wysiwyg
Updated: 29 Junio, 2013
Copyright (c) 2009-2013, UndeRock.
Usage: $('#content').redactor();
*/
/* propiedades */
var editor = 'textarea#info',
buttons = ['formatblock','|','bold','italic','underline','strikethrough','|','outdent','indent','|','fontName','foreColor','|','insertOrderedList','insertunorderedlist','|','insertHorizontalRule','justifyLeft','justifyCenter','justifyRight','justifyfull'],
colors = ['#000','#fff','#8C0095','#5133AB','#2672EC','#D24726','#008A17','#E1C404','#06c','#0c6','#c33','#f00','#0f0','#00f','#ff0','#f0f','#0ff','#2f2f2f','#ddd','#aaa'],
controllers = '',
colours = '',
formatblock = ['h1','h2','h3','h4','h5','h6'],
sizes = ['200%','185%','165%','145%','125%','105%'],
formatting = '',
fontName = '',
fontFamily = ['Arial, sans-serif','Comic Sans MS , cursive','Curier New, MonoSpace','Georgia , serf','Tw Cen MT Condensed'];
/* Comandos */
function ini(){
tolbar();
wrapper();
controles();
events();
}
function ejecutar(a,b){
document.execCommand(a,false,b);
}
function controles(){
var control = '';
var action = '';
/* buttons */
for(var i=0; i < buttons.length; i++){
action = buttons[i];
if(buttons[i]!=='foreColor' && buttons[i]!=='|'){
if(i!==(buttons.length -1)){
control += '#editor_'+action+' , ';
}else{
control += '#editor_'+action
}
}
}
/* CONTROLES */
$(control).bind('click',function(){
ejecutar($(this).attr('data'),'');
$('#editor_html').focus();
});
/* COLORES */
$('a.changeColour').bind('click',function(){
ejecutar('foreColor',$(this).attr('data-color'));
$('#editor_html').focus();
});
/* FORMATO */
$('*[data-format]').bind('click',function(){
hackSize("7");
});
/* Font Family...