Editar contenido de la página con html5

Una de las tantas novedades que trajo consigo html5 fue la posibilidad de que el usuario edite el contenido de la página de forma inline.

Antes de seguir, y lo que digo en todo los posteos que hago de html5, para probar estos ejemplos yo usaré una de las últimas versiones de Chrome. Y no es que le haga propaganda a este excelente navegador, sino que el mismo fue de los primeros en soportar las funcionalidades de html5. Aunque las últimas versiones de Explorer y Firefox también lo hacen, por ejemplo Explorer desde la versión 9.

Ahora bien, supongamos que tenemos esto:

<div id="contenido_editable">
    <h1> Ac&aacute; val el t&iacute;tulo </h1>
    <ul>
       <li> Item 1 </li>
       <li> Item 2 </li>
       <li> Item 3 </li>
    </ul>
    <div>
       <p> Contenido editable </p>
    </div>
</div>

Nada nuevo, un simple div contenedor con un título, una lista con tres item y otro contenedor donde hay un párrafo. Pero si le agregamos la propiedad contenteditable con el valor true ese contenedor será editable en su totalidad.

Veamos el ejemplo a continuación:

Ver ejemplo

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
          #contenido_editable {width: 500px; border: solid 1px #000; padding: 10px; cursor: text;}
       </style>
    </head>
    <body>
       <div id="contenido_editable" contenteditable="true">
          <h1> Ac&aacute; val el t&iacute;tulo </h1>
          <ul>
             <li> Item 1 </li>
             <li> Item 2 </li>
             <li> Item 3 </li>
          </ul>
          <div>
             <p> Contenido editable </p>
          </div>
       </div>
    </body>
</html>

Ahora con esto podemos crear un simple wysiwyg. Para ello haremos uso de nuevos métodos que vienen con el objeto document de javascript.

En primer lugar tendremos un código cómo esto:

<form>
    <input type="button" id="boton_negrita" value="Negrita" />
    <input type="button" id="boton_italica" value="Italica" />
    <input type="button" id="boton_subrayado" value="Subrayado" />
    <input type="button" id="boton_enlace" value="Enlace" />
    <input type="button" id="boton_mostrar_codigo" value="Mostrar c&oacute;digo" />
    <div id="area_editable" contenteditable="true">
       ...
    </div>
</form>

Y a continuación crearé tres funciones, una que permita al presionar los botones de negrita, itálica y subrayado que apliquen el formato del texto seleccionado. Otra que convierta un área seleccionada en un enlace y por último otra que nos muestre el código generado:

Ver ejemplo

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
          #area_editable {width: 500px; height: 200px; overflow: auto; border: solid 1px #ccc;}
       </style>
       <script type="text/javascript">
          function editarFormato(){
             var boton_negrita = document.getElementById('boton_negrita');
             var boton_italica = document.getElementById('boton_italica');
             var boton_subrayado = document.getElementById('boton_subrayado');
             boton_negrita.onclick = function(){
                document.execCommand('bold', false, null);
             }
             boton_italica.onclick = function(){
                document.execCommand('italic', false, null);
             }
             boton_subrayado.onclick = function(){
                document.execCommand('underline', false, null);
             }
          }
          function enlazar(){
             var boton_enlace = document.getElementById('boton_enlace');
             boton_enlace.onclick = function(){
                var direccion = prompt('Escriba el enlace', 'https://');
                if(direccion){
                   document.execCommand('createlink', false, direccion);
                }
             }
          }
          function mostrarCodigoGenerado(){
             var boton_mostrar_codigo = document.getElementById('boton_mostrar_codigo');
             boton_mostrar_codigo.onclick = function(){
                var codigo_generado = document.getElementById('area_editable').innerHTML;
                codigo_generado.replace(/</g, '&lt;');
                codigo_generado.replace(/>/g, '&lt;');
                alert(codigo_generado);
             }
          }
          window.onload = function(){
             editarFormato();
             enlazar();
             mostrarCodigoGenerado();
          }
       </script>
    </head>
    <body>
       <form>
          <input type="button" id="boton_negrita" value="Negrita" />
          <input type="button" id="boton_italica" value="Italica" />
          <input type="button" id="boton_subrayado" value="Subrayado" />
          <input type="button" id="boton_enlace" value="Enlace" />
          <input type="button" id="boton_mostrar_codigo" value="Mostrar c&oacute;digo" />
          <div id="area_editable" contenteditable="true">
             ...
          </div>
       </form>
    </body>
</html>