7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML5

Crea un editor de texto en línea con el atributo contentEditable

Scroll to top
Read Time: 7 mins

Spanish (Español) translation by Victor Manuel (you can also view the original English article)

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

El atributo contentEditable facilita mucho esta tarea. Todo lo que tienes que hacer es establecer este atributo en true y los elementos HTML5 estándar se convertirán en editables. En este tutorial, crearemos un editor de texto enriquecido en línea basado en esta característica.

Las Bases

Este atributo puede tomar tres valores válidos. Estos son true, falsey inherit. El valor true indica que el elemento es editable. Una cadena vacía también se evaluará como true. false indica que el elemento no se puede editar. El valor inherit es el valor predeterminado. inherit indica que un elemento será editable si su elemento primario inmediato es editable. Esto implica que si haces que un elemento sea editable, todos sus hijos, y no sólo los inmediatos, serán también editables, a menos que establezcas explícitamente su atributo contentEditable a false.

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

Crea el editor

Para crear el editor en línea, debes tener la capacidad de cambiar el valor del atributo contentEditable siempre que un usuario decida editar algo.

Al alternar el atributo contentEditable, es necesario saber qué valor tiene actualmente el atributo. Para ello, puedes utilizar la propiedad isContentEditable. Si isContentEditable devuelve true para un elemento, entonces el elemento es actualmente editable, de lo contrario no lo es. En breve utilizaremos esta propiedad para determinar el estado de varios elementos de nuestro documento.

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

Cada elemento que pretendemos mantener editable necesita tener su propio y único Id. 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 controla toda la edición y lo que se guarda.

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 los selectores especificados. De esta manera es más fácil realizar un seguimiento de los elementos editables con una variable. Por ejemplo, se puede acceder al título de nuestro documento mediante editables[0], que es lo que haremos a continuación.

A continuación, añadimos un receptor de eventos al evento de clic de nuestro botón. Cada vez que un usuario hace clic en el botón Editar documento, comprobamos si el título es editable. Si no es editable, establecemos la propiedad contentEditable en cada uno de los elementos editables a true. Además, el texto 'Editar documento' cambia a 'Guardar cambios'. Después de que los usuarios hayan realizado algunas ediciones, pueden hacer clic en el botón 'Guardar cambios' y los cambios realizados se pueden guardar de forma permanente.

Si el título es editable, establecemos la propiedad contentEditable en cada uno de los elementos editables en false. En este punto, también podemos guardar el contenido de nuestro documento en el servidor para recuperarlo posteriormente o sincronizar los cambios con una copia que exista en otro lugar. En este tutorial voy a guardar todo en localStorage en su lugar. Al guardar el valor en localStorage, estoy usando el Id de cada elemento para asegurarme de que no sobrescribo nada.

Ve mi demostración en vivo de CodePen.

Recuperación de contenido guardado

Si realizas cambios en cualquiera de los elementos de la demostración anterior y vuelves a cargar la página, observarás que los cambios realizados han desaparecido. Esto se debe a que no hay ningún código para recuperar los datos guardados. Una vez que el contenido se ha guardado en localStorage, necesitamos recuperarlo más tarde cuando un usuario vuelva a visitar la página web.

El código anterior comprueba si el título, el autor o el contenido ya existen en localStorage. Si lo hacen, establecemos el innerHTML de los elementos respectivos en los valores recuperados.

Ve otra demostración de CodePen.

Haz que el editor sea más fácil de usar

Para mejorar aún más nuestro editor en línea, necesitamos hacer dos cambios. La primera 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 el tipo de letra y el color de los elementos en cuestión debería ser suficiente. El selector [contenteditable="true"] aplicará el siguiente estilo a los elementos siempre que el atributo contenteditable sea true.

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

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

En este tutorial me quedo con el primer método. Eres libre de activar el autoguardado en base a cualquier evento que te parezca más apropiado en tus proyectos.

Ve la demostración de CodePen.

Edita toda la página con el modo de diseño

contentEditable es útil cuando tienes que editar algunos elementos en una página web. Cuando se tiene que cambiar el contenido de todos o casi todos los elementos de una página web, puedes usar la propiedad designMode. Esta propiedad es aplicable a todo el documento. Para activarlo y desactivarlo, utilizas document.designMode = 'on'; y document.designMode = 'off'; respectivamente.

Esto resultará valioso en situaciones en las que tú seas el diseñador y otra persona es el creador de contenido. Tú puedes proporciona un diseño y un poco de texto ficticio.Después, pueden reemplazarlo con contenido real. Para ver designMode en acción, abre la pestaña de la consola en las herramientas de desarrollo de su navegador. Escribe document.designMode = 'on'; en la consola y pulsa Intro. Todo lo que hay en esta página debe ser editable ahora.

Reflexiones finales

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

JavaScript se ha convertido en uno de los lenguajes de facto para trabajar en la web. No está exento de curvas de aprendizaje, y también hay un montón de regímenes y bibliotecas. Si estás buscando recursos adicionales para estudiar o usar en su trabajo, consulta lo que tenemos disponible en Envato marketplace.

Este tutorial cubrió los fundamentos del atributo contentEditable y la utilización 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 proporcionar capacidades de edición de texto enriquecido.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.