La creazione di un editor in linea richiede uno sforzo. Si inizia cambiando l'elemento da modificare con un ingresso o textarea campo. Per un'esperienza utente senza soluzione di continuità, potrebbe anche essere necessario utilizzare alcuni CSS per abbinare lo stile degli elementi scambiati a quello originale. Una volta che l'utente ha terminato la modifica, dovrai nuovamente cambiare gli elementi dopo aver copiato tutto il contenuto in quelli originali. 

Il contentEditable attributo rende questo compito molto più semplice. Tutto ciò che devi fare è impostare questo attributo su vero e gli elementi HTML5 standard diventeranno modificabili. In questo tutorial, creeremo un editor di testo RTF basato su questa funzione.

Le basi

Questo attributo può assumere tre valori validi. Questi sono vero, falso e ereditare. Il valore vero indica che l'elemento è modificabile. Una stringa vuota valuterà anche true. falso indica che l'elemento non è modificabile. Il valore ereditare è il valore predefinito. ereditare indica che un elemento sarà modificabile se il suo genitore immediato è modificabile. Ciò implica che se rendi un elemento modificabile, anche tutti i suoi figli e non solo quelli immediati diventeranno modificabili, a meno che tu non imposti esplicitamente il loro contentEditable attribuire a falso. 

È possibile modificare questi valori in modo dinamico con JavaScript. Se il nuovo valore non è uno dei tre validi, genera un'eccezione SyntaxError.

Creare l'editor

Per creare l'editor in linea, è necessario avere la possibilità di modificare il valore di contentEditable attributo ogni volta che un utente decide di modificare qualcosa. 

Durante la commutazione di contentEditable attributo, è necessario sapere quale valore tiene attualmente l'attributo. Per realizzare ciò, puoi usare il isContentEditable proprietà. Se isContentEditable ritorna vero per un elemento quindi l'elemento è attualmente modificabile, altrimenti non lo è. Utilizzeremo questa proprietà a breve per determinare lo stato di vari elementi nel nostro documento.

Il primo passo nella costruzione dell'editor è la creazione di un pulsante per attivare la modifica e alcuni elementi modificabili.

Modifica documento 
 
Una bella intestazione.
 
Ultima modifica di - Monty Shokeen
 
Alcuni contenuti che necessitano di correzione.
 

Ogni elemento che intendiamo mantenere modificabile deve avere un suo specifico Id. Ciò sarà utile quando dobbiamo salvare le modifiche o recuperarle in seguito per sostituire il testo all'interno di ciascun elemento.

Il seguente codice JavaScript gestisce tutte le modifiche e il salvataggio.

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 =' Salva modifiche '; editBtn.style.backgroundColor =' # 6F9 '; else // Disabilita Modifica modificabili [0] .contentEditable = 'false'; editables [1] .contentEditable = 'false'; editables [2] .contentEditable = 'false'; // Cambia pulsante testo e colore editBtn.innerHTML = 'Abilita modifica' ; editBtn.style.backgroundColor = '# F96'; // Salva i dati in localStorage per (var i = 0; i < editables.length; i++)  localStorage.setItem(editables[i].getAttribute('id'), editables[i].innerHTML);   );

Noi usiamo querySelectorAll () per memorizzare tutti gli elementi modificabili in una variabile. Questo metodo restituisce a NodeList che contiene tutti gli elementi nel nostro documento che sono abbinati dai selettori specificati. In questo modo è più facile tenere traccia degli elementi modificabili con una variabile. Ad esempio, è possibile accedere al titolo del nostro documento utilizzando editables [0], che è quello che faremo dopo.

Successivamente, aggiungiamo un listener di eventi all'evento click del nostro pulsante. Ogni volta che un utente fa clic sul pulsante Modifica documento, controlliamo se il titolo è modificabile. Se non è modificabile, impostiamo il contentEditable proprietà su ciascuno degli elementi modificabili a vero. Inoltre, il testo 'Modifica documento' cambia in 'Salva I Cambiamenti'. Dopo che gli utenti hanno apportato alcune modifiche, possono fare clic su 'Salva I Cambiamenti' pulsante e le modifiche apportate possono essere salvate in modo permanente.

Se il titolo è modificabile, impostiamo il contentEditable proprietà su ciascuno degli elementi modificabili su false. A questo punto, possiamo anche salvare il contenuto del nostro documento sul server per recuperarlo in un secondo momento o sincronizzare le modifiche con una copia esistente altrove. In questo tutorial ho intenzione di salvare tutto in memoria locale anziché. Quando si salva il valore in memoria locale, Sto usando il Id di ogni elemento per essere sicuro di non sovrascrivere nulla. 

Guarda la mia demo CodePen dal vivo.

Recupero del contenuto salvato

Se apporti modifiche a uno degli elementi della demo precedente e ricarichi la pagina, noterai che le modifiche apportate non sono più disponibili. Questo perché non esiste un codice in atto per recuperare i dati salvati. Una volta che il contenuto è stato salvato memoria locale, dobbiamo recuperarlo in seguito quando un utente visita nuovamente la pagina 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'); 

Il codice sopra controlla se il titolo, l'autore o il contenuto esistono già memoria locale. Se lo fanno, impostiamo il innerHTML dei rispettivi elementi ai valori recuperati.

Guarda un'altra demo di CodePen. 

Rendere l'editor più user-friendly

Per migliorare ulteriormente il nostro editor in linea, dobbiamo apportare due modifiche. Il primo è quello di fornire una chiara distinzione tra ciò che è modificabile e ciò che non lo è. Questo può essere ottenuto cambiando l'aspetto degli elementi modificabili con i CSS. Cambiare il carattere e il colore degli elementi interessati dovrebbe fare il trucco. Il [Contenteditable = "true"] il selettore applicherà il seguente stile agli elementi ogni volta che contenteditable l'attributo è impostato su vero.

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

Il secondo miglioramento sarebbe la possibilità di salvare automaticamente i dati. Puoi farlo in diversi modi, come il salvataggio automatico ogni cinque secondi. 

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

Puoi anche salvare le modifiche su ogni keydown evento.

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

In questo tutorial mi sto attenendo al metodo precedente. Sei libero di attivare il salvataggio automatico in base a qualsiasi evento che sembra più appropriato nei tuoi progetti.

Guarda la demo di CodePen.

Modifica dell'intera pagina con la modalità Progettazione

contentEditable è utile quando devi modificare alcuni elementi su una pagina web. Quando il contenuto di tutti o quasi tutti gli elementi di una pagina web deve essere modificato, puoi utilizzare il comando designMode proprietà. Questa proprietà è applicabile all'intero documento. Per accenderlo sopra e via, usate document.designMode = 'on'; e document.designMode = 'off'; rispettivamente.

Ciò si rivelerà utile in situazioni in cui sei il progettista e qualcun altro è il creatore di contenuti. Fornisci loro un design e un testo fittizio. Più tardi, possono sostituirlo con contenuti reali. Vedere designMode in azione, apri la scheda della console negli strumenti di sviluppo del browser. genere document.designMode = 'on'; nella console e premere accedere. Tutto in questa pagina dovrebbe essere modificabile ora.

Pensieri finali

Il contentEditable l'attributo è utile in situazioni come la modifica rapida degli articoli o l'abilitazione degli utenti a modificare i loro commenti con un solo clic. Questa funzionalità è stata implementata per la prima volta da IE 5.5. Più tardi, è stato standardizzato da WHATWG. Anche il supporto del browser è abbastanza buono. Tutti i principali browser oltre a Opera Mini supportano questo attributo.  

JavaScript è diventato una delle lingue di fatto di lavorare sul web. Non è senza le curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.

Questo tutorial ha riguardato le basi del contentEditable attributo e come può essere utilizzato per creare un editor di testo inline di base. Il prossimo tutorial ti insegnerà come implementare una barra degli strumenti e fornire funzionalità di modifica di testo avanzato.