La creación de un editor de texto requiere mucho esfuerzo. Debes empezar por seleccionar el elemento el cual quieres transformar en editor, como un campo input o un textarea. Para una mejor experiencia para el usuario, es posible que también tengas que utilizar un poco de CSS con el fin de hacer coincidir con el estilo de los elementos que tengas actualmente en la web. Una vez que el usuario termine de editar, tendrás que volver a cambiar los elementos después de copiar todo el contenido a los originales.
El atributo contentEditable hace esta tarea mucho más sencilla. Todo lo que tienes que hacer es configurar este atributo a true y los elementos que cumplan el estándar HTML5 serán editables. En este tutorial, vamos a crear un completo editor de texto online basado en esta característica.
Lo básico
Este atributo puede coger tres valores válidos. Estos son true, false e 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 se podrá editar si su padre directo es editable. Esto implica que si creas un elemento editable, todos sus hijos, y no sólo los inmediatos, serán editables, a menos que establezcas explícitamente su atributo contentEditable a false.
Es posible cambiar estos valores dinámicamente mediante JavaScript. Si el nuevo valor no es ninguno de los tres válidos, se producirá un error SyntaxError.
Creando el editor
Para crear el editor de texto es necesario tener la capacidad de cambiar el valor del atributo contentEditable cada vez que un usuario decida editar algo.
Para cambiar el atributo contentEditable, es necesario conocer cuál es su valor actual. Para lograr esto, puedes utilizar la propiedad isContentEditable. Si isContentEditable devuelve true en un elemento, entonces ese elemento es actualmente editable, de lo contrario no lo es. Vamos a utilizar esta propiedad en breve para determinar el estado de varios elementos en nuestro documento.
El primer paso en el desarrollo del editor es la creación de un botón para alternar la edición y algunos elementos editables.
<button id="editBtn" type="button">Edit Document</button>
<div id="editor">
<h1 id="title">A Nice Heading.</h1>
<p>Last Edited By - <span id="author">Monty Shokeen</span></p>
<p id="content">Some content that needs correction.</p>
</div>
Cada elemento que tengamos la intención de editar debe tener su propio identificador único. Esto será útil cuando tengamos que guardar los cambios o recuperarlos posteriormente para reemplazar el texto dentro de cada elemento.
El siguiente código JavaScript se encarga de toda la edición y el 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 = 'Save Changes';
editBtn.style.backgroundColor = '#6F9';
} else {
// Disable Editing
editables[0].contentEditable = 'false';
editables[1].contentEditable = 'false';
editables[2].contentEditable = 'false';
// Change Button Text and Color
editBtn.innerHTML = 'Enable Editing';
editBtn.style.backgroundColor = '#F96';
// Save the data in localStorage
for (var i = 0; i < editables.length; i++) {
localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
}
}
});
Utilizamos 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 se corresponden con los selectores especificados. De esta manera es más fácil hacer un seguimiento de los elementos editables. Por ejemplo, al título de nuestro documento se puede acceder fácilmente mediante el uso editables[0], que es lo que vamos a hacer a continuación.
Después, añadimos un detector del evento click en nuestro botón. Cada vez que un usuario haga clic en el botón Edit Document, comprobamos si el título es editable. Si no es editable, establecemos la propiedad contentEditable en cada uno de los elementos editables a true. Por otra parte, el texto “Edit Document” cambia a “Save Changes”. Después de que los usuarios hayan hecho algunas modificaciones, pueden hacer clic en el botón "Save Changes" y los cambios realizados se guardarán de forma permanente.
Si el título es editable, establecemos la propiedad contentEditable 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 en una copia que exista en otro lugar. En este tutorial voy a guardarlo todo en localStorage. Al guardar el valor en localStorage, utilizo el id de cada elemento para asegurarme de no sobrescribir nada.
Recuperando el contenido guardado
Si se realizan cambios en cualquiera de los elementos de la demo anterior y vuelves a cargar la página, verás que los cambios realizados ya no están. Esto es porque no existe el código para recuperar los datos guardados. Una vez que el contenido se haya guardado en el localStorage, tendremos que recuperarlo más tarde cuando un usuario visite la página de nuevo.
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');
}
}
En el código anterior comprobamos si el título, el autor o el contenido ya existe en localStorage. Si esto es cierto, establecemos el innerHTML de los respectivos elementos a los valores recuperados.
Haciendo que el editor sea más fácil de usar
Para mejorar aún más nuestro editor de texto, tenemos que hacer dos cambios. El primero de ellos es el de hacer una clara distinción entre lo que es editable y lo que no lo es. Esto puede conseguirse cambiando el aspecto de los elementos editables con CSS. Solo hay que cambiar la fuente y el color de los elementos en cuestión para hacer el truco. El selector [contenteditable = "true"] aplicará el siguiente estilo a los elementos que tengan el atributo contenteditable a true.
[contenteditable="true"] {
font-family: "Rajdhani";
color: #C00;
}
La segunda mejora es la capacidad de guardar los cambios automáticamente. Puedes hacerlo de varias maneras, como auto-guardando 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 puedes guardar los cambios en cada evento KeyDown.
document.addEventListener('keydown', function(e) {
for (var i = 0; i < editables.length; i++) {
localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);
}
});
Fuente: code.tutsplus.com