<style>
#txtbox, #text {
width:800px;
height:400px;
padding:10px;
overflow:scroll;
background:#EFEFEF;
border:0px none;
}
#text {
display:none;
}
button, input, select {
background:#EFEFEF;
border:#000000 none solid;
}
</style>
<script>
function init(x) {
if (x=="h") {document.getElementById('txtbox').style.display='none';document.getElementById('text').style.display='block';}
if (x=="s") {document.getElementById('txtbox').style.display='block';document.getElementById('text').style.display='none';}
document.getElementById('text').value=document.getElementById('txtbox').innerHTML;
if (x!="h" || x!="s") document.execCommand(x,false,null);
document.getElementById('txtbox').focus();
}
</script>


<p style="width:800px;height:auto;padding:10px;background:#EFEFEF">
<button onclick="init('bold')">Negrita</button>
<button onclick="init('italic')">Itálica</button>
<button onclick="init('underline')">Subrayado</button>
<button onclick="init('justifycenter')">Centrado</button>
<button onclick="init('inserthorizontalrule')">Línea Hr.</button>
<button onclick="init('redo')">Rehacer</button>
<button onclick="init('undo')">Deshacer</button>
<button onclick="init('h')">Vista HTML</button>
</p>
<div id="txtbox" contenteditable="true">

<p>Escribe aquí ...</p>

</div>

<textarea id="text" name="text"></textarea>

<input  class="form-control" name="nombre" type="text">