Share
Gli editor WYSIWYG sono piuttosto popolari. Potresti averne usato uno ad un certo punto. Ci sono molte librerie disponibili per aiutarti a configurare il tuo editor. Anche se sono veloci da configurare, ci sono anche aspetti negativi dell'utilizzo di queste librerie. Per cominciare, sono gonfiati. Molti di loro hanno caratteristiche fantasiose che potresti non usare. Inoltre, la personalizzazione dell'aspetto di questi editor può essere un problema.
In questo tutorial, costruiremo il nostro editor WYSIWYG leggero. Alla fine di questo tutorial, avrai un editor con funzionalità di formattazione di base che è in stile in base alle tue preferenze.
Iniziamo con l'introduzione di execCommand. Useremo questo comando per implementare ampiamente il nostro editor.
execCommand è un metodo dell'oggetto documento. Ci consente di manipolare il contenuto di una regione modificabile. Se usato insieme contentEditable, può aiutarci a creare un editor di testo avanzato. Sono disponibili molti comandi come aggiungere un collegamento, effettuare una selezione grassetto o corsivo, e cambiare la dimensione del carattere o il colore. Questo metodo segue la sintassi:
document.execCommand (CommandName, ShowDefaultUI, ValueArgument);
CommandName è una stringa che specifica il nome del comando da eseguire. ShowDefaultUIè un booleano per indicare se l'interfaccia di supporto debba essere mostrata o meno. Questa opzione non è completamente implementata ed è meglio impostarla su false. ValueArgument è una stringa per fornire informazioni come URL dell'immagine o ForeColor. Questo argomento è impostato su nullo quando un comando non richiede che un valore abbia effetto.
Avremo bisogno di utilizzare diverse versioni di questo metodo per implementare varie funzionalità. Nei prossimi paragrafi, li esaminerò tutti uno per uno.
Comandi come grassetto, giustificare, annullare e ripetere non hanno bisogno di a ValueArgument. In questi casi utilizziamo la seguente sintassi:
document.execCommand (commandName, false, null);
CommandName è semplicemente il nome di comando come justifyCenter, justifyRight, grassetto, eccetera.
Comandi come insertImage, createLink e ForeColor serve un terzo argomento per funzionare correttamente. Per questi comandi, è necessaria la seguente sintassi:
document.execCommand (commandName, false, value);
Per insertImage, il valore sarebbe l'URL dell'immagine da inserire. In caso di ForeColor, sarebbe un valore di colore simile # FF9966 o un nome simile blu.
L'aggiunta di tag stile blocco HTML richiede l'utilizzo formatBlock come CommandName e il nome del tag come valueArgument. La sintassi sarebbe simile a:
Accentsconagua
document.execCommand ('formatBlock', false, tagName);Questo metodo aggiungerà un tag stile blocco HTML attorno alla riga che contiene la selezione corrente. Sostituisce anche qualsiasi tag che già esisteva lì. tagName può essere uno qualsiasi dei tag principali (h1-h6), p o blockquote.
Ho discusso i comandi più comuni qui. Puoi visitare Mozilla per un elenco di tutti i comandi disponibili.
Con le nozioni di base fuori dal nostro modo, è il momento di creare la barra degli strumenti. Userò le icone Font Awesome per i pulsanti. Avresti potuto notare che lasciando da parte alcune differenze, tutto il execCommands hanno una struttura simile Possiamo usarlo a nostro vantaggio usando il seguente markup per i pulsanti della barra degli strumenti:
In questo modo ogni volta che gli utenti fanno clic su un pulsante, saremo in grado di dire quale versione di execCommand da utilizzare in base al valore di -Comando di dati attributo. Ecco alcuni pulsanti per riferimento:
H2
Il -Comando di dati il valore dell'attributo per il primo pulsante è h2. Dopo aver controllato questo valore in JavaScript, useremo il formatBlock versione del execCommand metodo. Allo stesso modo, per l'ultimo pulsante, indice suggerisce che dobbiamo usare il no valueArgument versione di execCommand.
Creazione ForeColor e colore di sfondo i pulsanti sono una storia diversa. Pongono due problemi. A seconda del numero di colori che forniamo agli utenti tra cui scegliere, scrivere quel codice può essere faticoso e soggetto a errori. Per affrontare questo problema, possiamo utilizzare il seguente codice JavaScript:
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66', 'CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF']; var forePalette = $ ('. fore-palette'); per (var i = 0; i < colorPalette.length; i++) forePalette.append(''); Notare che sto anche impostando a Dati valore attributo per ogni colore. Questo sarà in seguito utilizzato come valueArgument nel execCommand metodo.
Il secondo problema è che non possiamo mostrare più colori contemporaneamente, perché richiederebbe molto spazio e comporterebbe un'esperienza utente terribile. Usando un piccolo CSS, possiamo assicurarci che la tavolozza dei colori appaia solo quando un utente passa sopra i rispettivi pulsanti. Il markup per questi pulsanti deve essere modificato come segue:
Per visualizzare le palette solo su librarsi, abbiamo bisogno del seguente CSS:
.fore-palette, .back-palette display: none; .fore-wrapper: hover .fore-palette, .back-wrapper: hover .back-palette display: block; fluttuare: a sinistra; posizione: assoluta;
Ci sono molte altre regole CSS nella demo di CodePen per rendere la barra più carina, ma questo è tutto ciò che è necessario per le funzionalità di base.
Ora è il momento di rendere funzionale il nostro editor. Il codice richiesto per farlo è sorprendentemente piccolo.
$ ('. toolbar a'). click (function (e) var command = $ (this) .data ('command'); if (comando == 'h1' || comando == 'h2' || comando == 'p') document.execCommand ('formatBlock', false, command); if (command == 'forecolor' || command == 'backcolor') document.execCommand ($ (this) .data ( 'command'), false, $ (this) .data ('value')); if (comando == 'createlink' || command == 'insertimage') url = prompt ('Inserisci il link qui:' , 'http: \ / \ /'); document.execCommand ($ (this) .data ('command'), false, url); else document.execCommand ($ (this) .data ('command'), false, null););Iniziamo collegando un evento click a tutti i pulsanti della barra degli strumenti. Ogni volta che si fa clic su un pulsante della barra degli strumenti, viene memorizzato il valore di -Comando di dati attributo del rispettivo pulsante nella variabile, comando. Successivamente viene utilizzato per chiamare la versione appropriata di execCommand metodo. Aiuta a scrivere codice conciso ed evita la ripetizione.
Quando si imposta ForeColor e colore di sfondo, Sto usando il Dati valore attributo come terzo argomento. createLink e insertImage non avere una costante url valore, quindi usiamo un prompt per ottenere i valori dall'utente. Potrebbe anche piacere effettuare ulteriori controlli per assicurarsi che il url è valido. Se la comando variabile non soddisfa nessuno dei Se blocchi, eseguiamo la prima versione di execCommand.
Questo è l'aspetto del nostro editor WYSIWYG.
Si potrebbe anche implementare la funzionalità di salvataggio automatico usando memoria locale che ho discusso nel mio ultimo tutorial.
Diversi browser presentano differenze di implementazione minori. Ad esempio, tieni presente che quando si utilizza formatBlock, Internet Explorer supporta solo i tag di intestazione h1 - h6, indirizzo e pre. È inoltre necessario includere i delimitatori di tag quando si specifica il CommandName piace .
Non tutti i comandi sono supportati da ogni browser. Internet Explorer non supporta comandi come insertHTML e hiliteColor. allo stesso modo, insertBrOnReturn è supportato solo da Firefox. Puoi leggere ulteriori informazioni sulle incoerenze del browser su questa pagina GitHub.
Creare il tuo editor WYSIWYG può essere una grande esperienza di apprendimento. In questo tutorial ho coperto molti comandi e ho utilizzato alcuni CSS per lo stile di base. Come esercizio, ti suggerisco di provare a implementare un pulsante della barra degli strumenti per impostare il font di una selezione di testo. L'implementazione sarà simile a quella del ForeColor pulsante.
Spero che tu abbia amato questo tutorial e imparato qualcosa di nuovo. Se hai creato il tuo editor WYSIWYG da zero, sentiti libero di collegarlo ad esso nella sezione dei commenti.
