Contenido HTML editable con HTML5 y Javascript

Contenido HTML editable con HTML5 y Javascript: Una de las cosas nuevas que trae HTML5 es la de poder hacer los elementos de una página web editables, así el visitante podría poder en agregar, borrar o trasladar un elemento HTML a un determinado elemento. En la edición podemos usar 3 atributos:

• contentEditable: que nos permite hacer que elementos HTML y sus nodos hijos sean editables.
  
• desingMode: Hace que un documento completo sea editable.
  
• spellCheck: Permite al usuario habilitar la correcion automática.
  

ContentEditable

Se utiliza para hacer elementos HTML editables como agregar, borrar, pegar, cortar texto incluso hasta botones, imágenes, enlaces etc.

Ejemplo 1 - Como atributo de un elemento HTML:

Código :

<div contentEditable="true">
    Acá puedes escribir
</div>

[nota:924dd452e4]

1. En algunos navegadores también se puede trasladar.
   
2. También en vez de colocar, <div contentEditable='true' >, se puede poner solamente el atributo 'contentEditable'. Algo así <div contentEditable> , claro que esto no es válido para W3C.

[/nota:924dd452e4]

Ejemplo 2: Como propiedad de un objeto HTML

Código :

<div id="miDiv">
    <input type="button" value="boton"/>
    <a href="#" >Enalce</a>
    <input type="radio">
    <span>texto</span>
</div>

<script type="text/javascript">
    document.getElementById('miDiv').contentEditable = true;
</script>

[nota:924dd452e4]

1. Se puede agregar o borrar el botón, enlace, radio, etc.
   

[/nota:924dd452e4]

Ejemplo 3: isContentEditable averigua si una etiqueta HTML tiene como atributo contentEditable

Código :

<div contentEditable id="miDiv1" style="border:1px solid black">
    Esto pertenece al Div 1
    <div id="miDiv2" style="border:1px solid blue;margin:5px;">
        Esto pertenece al Div 2
    </div>
</div>

<div contentEditable="false" id="miDiv3" style="border:1px solid red">
    Esto pertenece al Div 3
</div>

<div id="miDiv4" style="border:1px solid green">
    Esto pertenece al Div 4
</div>

<script type="text/javascript">
    //isContentEditable devuelve true o false
    var idContentDiv1 = document.getElementById('miDiv1').isContentEditable;
    var idContentDiv2 = document.getElementById('miDiv2').isContentEditable;
    var idContentDiv3 = document.getElementById('miDiv3').isContentEditable;
    var idContentDiv4 = document.getElementById('miDiv4').isContentEditable;

    document.write("</br> El Div1 es editable : " + idContentDiv1);
    document.write("</br> El Div2 es editable : " + idContentDiv2);
    document.write("</br> El Div3 es editable : " + idContentDiv3);
    document.write("</br> El Div4 es editable : " + idContentDiv4);
</script>

[nota:924dd452e4]

1. isContentEditable devuelve como valor true o false, si tiene o no el atributo respectivamente.
   
2. Los elementos HTML que tienen el atributo contentEditable heredan ese atributo a sus nodos hijos.
   
3. Si no está el elemento HTML con el atributo contentEditable, entonces se le considera como false.
   

[/nota:924dd452e4]

DesignMode

Si queremos que un documento completo sea editable, podemos aplicar la propiedad designMode al documento.

Si queremos una página totalmente editable basta con poner document.designMode = 'on' .También se puede usar con iframes.

Ejemplo 1: Utilizando la propiedad designMode en un iframe

Código :

<script type="text/javascript">
    function editar(){
        var miIframe = document.getElementById('miIframe');
        miIframe.contentWindow.document.designMode = "on"
    }
</script>

<input type="button" onclick="editar()" value="editar">

<iframe id="miIframe" src="otraPagina.html" width="315" height="150">
    <p>no hay iframe en este navegador</p>
</iframe>

[nota:924dd452e4]

1. desingMode funciona con los iframes en todos los navegadores a excepción de Google Chrome, pero sí funciona en Chrome cuando llamamos con el iframe a una pagina del mismo Dominio.
   
2. designMode en local no funciona con Google Chrome.
   

[/nota:924dd452e4]

Spellcheck

Ya por último, tenemos la propiedad spellcheck que se usa para verificar la ortografía usada en una etiqueta textarea, input y también dentro de un elemento que tenga el atributo contentEditable activo.

Ejemplo: spellcheck como atributo de un elemento HTML y como propiedad del DOM

Código :

<script type="text/javascript">
    function quitar(){
document.getElementById('miInput').spellcheck = false;
    }
</script>

<input id="miInput" type="text">
<input type="button" onclick="quitar()" value="Quitar correción"><br>
<input type="text" spellcheck="false"><br>
<div id="miDiv" contentEditable="true" spellcheck="true">¡Hola que tal!</div>

[nota:924dd452e4]

1. El atributo spellcheck en los navegadores Chrome, Opera y Safari están por defecto con el valor de true.
   
2. No funciona en Intenet Explorer, aunque en la versión 10 ya tiene autocorreción.
   

[/nota:924dd452e4]

Puedes ver las demostraciones de los ejemplos en este enlace aquí
Más artículos en mi Blog