Ir al contenido principal

Contenido HTML editable con HTML5 y Javascript (contentEditable, designMode, spellcheck)


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:

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

ContentEditable

Como ya se dijo se utiliza para hacer elementos HTML editables como agregar ,borrar ,pegar, cortar texto incluso hasta botones ,imagenes , enlaces etc.

Ejemplo 1 : Como atributo de un elemento HTML.

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

Nota:

  1. Cualquiera como esta imagen de Google+ se puede seleccionar y copiar para después pegarla en la demostración de arriba.
  2. En algunos navegadores también se puede trasladar.
  3. 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 valido para W3C
Ejemplo 2 : También como propiedad de un objeto HTML.

<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>
<div contentEditable="true">
    Acá puedes escribir
</div>

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

<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 :
  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.
  4. DesignMode
  5. Si queremos que un documento completo sea editable podemos aplicar la propiedad designMode al documento. 
  6. Si queremos una pagina totalmente editable basta con poner document.designMode = 'on' .También se puede usar con iframes.

DesignMode
Ejemplo 1 : Utilizando la propiedad designMode en un iframe.
<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 :
  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.
  3. Spellcheck
  4. Bueno ya por ultimo 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.

spellcheck 
Ejemplo : spellcheck como atributo de un elemento HTML y como propiedad del DOM.
<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:
  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.

Comentarios

  1. mil gracias por tus aportes de jor_0203

    ResponderEliminar
  2. Hola, muy bueno, por cierto, lo que no acabo de conseguir es como puedo hacer que un usuario añada links en su parte editable de la página.
    Gracias por tu ayuda.

    ResponderEliminar
  3. Hay que crear un script


    function crearEnlace() {
    var url = prompt("Escribe URL:", "http://");
    if (url) {
    document.execCommand('createLink', false, url);
    }


    Y después un botón para llamar a la función

    input value="Crear enlace" onclick="crearEnlace();" type="button"

    NOTA: Se ha de seleccionar el texto donde se quiere poner el link y depués apretar el botón

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl

La propiedad Disabled en Javascript

Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event

Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos