Crear un editor en línea requiere esfuerzo. Comienza por cambiar el elemento a editar con un entrada o textarea campo. Para una experiencia de usuario perfecta, también es posible que tenga que usar algunos CSS para que el estilo de los elementos intercambiados coincida con el original. Una vez que el usuario haya terminado de editar, nuevamente tendrá que cambiar los elementos después de copiar todo el contenido a los originales. 

los contenido editable atributo hace esta tarea mucho más fácil. Todo lo que tienes que hacer es establecer este atributo en cierto y los elementos estándar de HTML5 serán editables. En este tutorial, crearemos un editor de texto enriquecido en línea basado en esta característica.

Los basicos

Este atributo puede tomar tres valores válidos. Estos son cierto, falso y heredar. El valor cierto Indica que el elemento es editable. Una cadena vacía también se evaluará como verdadera. falso Indica que el elemento no es editable. El valor heredar es el valor predeterminado. heredar indica que un elemento será editable si su elemento primario inmediato es editable. Esto implica que si hace que un elemento sea editable, todos sus elementos secundarios, y no solo los inmediatos, también serán editables, a menos que establezca explícitamente sus elementos. contenido editable atribuir a falso. 

Puedes cambiar estos valores dinámicamente con JavaScript. Si el nuevo valor es ninguno de los tres valores válidos, se genera una excepción SyntaxError.

Creando el Editor

Para crear el editor en línea, debe tener la capacidad de cambiar el valor del contenido editable atributo cada vez que un usuario decide editar algo. 

Mientras se alterna el contenido editable atributo, es necesario saber qué valor tiene el atributo actualmente. Para lograr eso, puedes usar el isContentEditable propiedad. Si isContentEditable devoluciones cierto para un elemento, entonces el elemento es actualmente editable, de lo contrario no lo es. Usaremos esta propiedad en breve para determinar el estado de los diversos elementos de nuestro documento..

El primer paso para construir el editor es la creación de un botón para alternar la edición y algunos elementos editables..

Editar documento 
 
Un buen rumbo.
 
Última edición por - Monty Shokeen
 
Algún contenido que necesita corrección..
 

Cada elemento que pretendemos mantener editable debe tener su propio y exclusivo Carné de identidad. Esto será útil cuando tengamos que guardar los cambios o recuperarlos más tarde para reemplazar el texto dentro de cada elemento.

El siguiente código JavaScript maneja toda la edición y guardado.

var editBtn = document.getElementById ('editBtn'); var editables = document.querySelectorAll ('# title, #author, #content') editBtn.addEventListener ('click', function (e) if (! editables [0] .isContentEditable) editables [0] .contentEditable = ' true '; editables [1] .contentEditable =' true '; editables [2] .contentEditable =' true '; editBtn.innerHTML =' Guardar cambios '; editBtn.style.backgroundColor =' # 6F9 '; else // Deshabilitar la edición de editables [0] .contentEditable = 'false'; editables [1] .contentEditable = 'false'; editables [2] .contentEditable = 'false'; // Cambiar el texto y el color del botón editBtn.innerHTML = 'Enable Editing' ; editBtn.style.backgroundColor = '# F96'; // Guarde los datos en localStorage para (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

Usamos querySelectorAll () para almacenar todos los elementos editables en una variable. Este método devuelve un NodeList que contiene todos los elementos de nuestro documento que coinciden con selectores específicos. De esta manera es más fácil hacer un seguimiento de los elementos editables con una variable. Por ejemplo, se puede acceder al título de nuestro documento usando editables [0], que es lo que haremos a continuacion.

A continuación, agregamos un detector de eventos al evento de clic de nuestro botón. Cada vez que un usuario hace clic en el botón Editar documento, verificamos si el título es editable. Si no es editable, configuramos el contenido editable propiedad en cada uno de los elementos editables a cierto. Además, el texto. 'Editar documento' cambios a 'Guardar cambios'. Después de que los usuarios hayan hecho algunas ediciones, pueden hacer clic en 'Guardar cambios' Botón y los cambios realizados se pueden guardar de forma permanente..

Si el título es editable, configuramos el contenido editable Propiedad en cada uno de los elementos editables a falso. En este punto, también podemos guardar el contenido de nuestro documento en el servidor para recuperarlo más tarde o sincronizar los cambios a una copia que existe en otro lugar. En este tutorial voy a guardar todo en almacenamiento local en lugar. Al guardar el valor en almacenamiento local, Estoy usando el Carné de identidad de cada elemento para asegurarse de que no sobrescribo nada. 

Ver mi demo en vivo de CodePen.

Recuperar contenido guardado

Si realiza cambios en cualquiera de los elementos de la demostración anterior y vuelve a cargar la página, notará que los cambios que realizó se han ido. Esto se debe a que no hay ningún código para recuperar los datos guardados. Una vez que el contenido ha sido guardado en almacenamiento local, necesitamos recuperarlo más tarde cuando un usuario vuelva a visitar la página web.

if (typeof (Storage)! == "undefined") if (localStorage.getItem ('title')! == null) editables [0] .innerHTML = localStorage.getItem ('title');  if (localStorage.getItem ('author')! == null) editables [1] .innerHTML = localStorage.getItem ('author');  if (localStorage.getItem ('content')! == null) editables [2] .innerHTML = localStorage.getItem ('content'); 

El código anterior comprueba si el título, el autor o el contenido ya existen en almacenamiento local. Si lo hacen, configuramos el internalHTML De los elementos respectivos a los valores recuperados..

Ver otra demo de CodePen. 

Haciendo el editor más fácil de usar

Para mejorar aún más nuestro editor en línea, necesitamos hacer dos cambios. El primero es proporcionar una distinción clara entre lo que es editable y lo que no lo es. Esto se puede lograr cambiando la apariencia de los elementos editables con CSS. Cambiar la fuente y el color de los elementos en cuestión debe hacer el truco. los [contenteditable = "true"] Selector aplicará el siguiente estilo a los elementos cuando el contenteditable atributo se establece en cierto.

[contenteditable = "true"] font-family: "Rajdhani"; color: # C00; 

La segunda mejora sería la capacidad de guardar automáticamente los datos. Puede hacerlo de varias maneras, como guardar automáticamente cada cinco segundos. 

setInterval (function () for (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  , 5000);

También puede guardar los cambios en cada keydown evento.

document.addEventListener ('keydown', función (e) para (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);  );

En este tutorial me quedo con el método anterior. Usted es libre de activar el guardado automático basado en cualquier evento que parezca más apropiado en sus proyectos.

Ver la demo de CodePen.

Edición de la página completa con el modo de diseño

contenido editable es útil cuando tienes que editar algunos elementos en una página web. Cuando deba cambiarse el contenido de todos o casi todos los elementos de una página web, puede utilizar el designMode propiedad. Esta propiedad es aplicable a todo el documento. Para convertirlo en y apagado, tu usas document.designMode = 'on'; y document.designMode = 'off'; respectivamente.

Esto resultará valioso en situaciones en las que usted es el diseñador y alguien más es el creador de contenido. Usted les proporciona un diseño y un texto ficticio. Más tarde, pueden reemplazarlo con contenido real. Para ver designMode En acción, abra la pestaña de la consola en las herramientas de desarrollo de su navegador. Tipo document.designMode = 'on'; en la consola y presione Entrar. Todo en esta página debería ser editable ahora..

Pensamientos finales

los contenido editable El atributo es conveniente en situaciones como editar artículos rápidamente o permitir a los usuarios editar sus comentarios con un solo clic. Esta característica fue implementada por primera vez por IE 5.5. Más tarde, fue estandarizado por WHATWG. El soporte del navegador también es bastante bueno. Todos los principales navegadores, además de Opera Mini, admiten este atributo..  

JavaScript se ha convertido en uno de los idiomas de facto de trabajar en la web. No deja de tener sus curvas de aprendizaje, y también hay muchos marcos y bibliotecas para mantenerte ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.

Este tutorial cubrió los fundamentos de la contenido editable atributo y cómo se puede utilizar para crear un editor de texto en línea básico. El siguiente tutorial le enseñará cómo implementar una barra de herramientas y le proporcionará capacidades de edición de texto enriquecido.