Share
Editorii WYSIWYG sunt destul de populare. S-ar putea să fi folosit și unul la un moment dat. Există o mulțime de biblioteci disponibile pentru a vă ajuta să vă configurați propriul editor. Deși se instalează rapid, există și dezavantaje ale utilizării acestor biblioteci. În primul rând, ele sunt umflate. Cele mai multe dintre ele au caracteristici fanteziste pe care nu le puteți folosi. În plus, personalizarea aspectului editorilor poate fi o durere de cap.
În acest tutorial, vom construi propriul nostru editor WYSIWYG. Până la sfârșitul acestui tutorial, veți avea un editor cu capabilități de formatare de bază, care este proiectat în funcție de preferințele dvs..
Să începem cu introducerea ExecCommand. Vom folosi această comandă pentru a implementa extensiv editorul nostru.
ExecCommand este o metodă a obiectului documentului. Ne permite să manipulăm conținutul unei regiuni editabile. Când este utilizat împreună contenteditable, ne poate ajuta să creăm un editor de text bogat. Există o mulțime de comenzi disponibile cum ar fi adăugarea unui link, efectuarea unei selecții îndrăzneţ sau cursiv, și schimbarea dimensiunii fontului sau a culorii. Această metodă urmează sintaxa:
document.execCommand (CommandName, ShowDefaultUI, ValueArgument);
numele comenzii este un șir care specifică numele comenzii care trebuie executată. ShowDefaultUIeste un Boolean pentru a indica dacă interfața de suport trebuie să fie afișată sau nu. Această opțiune nu este pe deplin implementată și este cel mai bine să o setați pe fals. ValueArgument este un șir pentru a furniza informații precum adresa URL a imaginii sau culoarea din fata. Acest argument este setat la nul când o comandă nu are nevoie de o valoare pentru a intra în vigoare.
Va trebui să folosim versiuni diferite ale acestei metode pentru a implementa diferite caracteristici. În următoarele câteva paragrafe, voi trece peste toate acestea unul câte unul.
Comenzile precum îndrăzneala, justificarea, anularea și refacerea nu au nevoie de a ValueArgument. În astfel de cazuri, folosim următoarea sintaxă:
document.execCommand (commandName, false, null);
numele comenzii este pur și simplu numele de comandă cum ar fi justifyCenter, justifyRight, îndrăzneţ, etc.
Comenzi cum ar fi insertImage, Creați link și culoarea din fata au nevoie de un al treilea argument pentru a funcționa corect. Pentru aceste comenzi, aveți nevoie de următoarea sintaxă:
document.execCommand (commandName, false, valoare);
Pentru insertImage, valoarea ar fi adresa URL a imaginii care urmează să fie inserată. În cazul în care culoarea din fata, ar fi o valoare de culoare cum ar fi # FF9966 sau un nume de genul albastru.
Adăugarea de etichete în stil bloc de HTML necesită utilizarea dvs. formatBlock la fel de numele comenzii și numele etichetei ca valueArgument. Sintaxa ar fi similară cu:
Accentsconagua
document.execCommand ('formatBlock', false, tagName);Această metodă va adăuga o etichetă în stil de blocare HTML în jurul liniei care conține selecția curentă. De asemenea, înlocuiește orice etichetă care există deja acolo. nume eticheta poate fi oricare dintre etichetele principale (h1-h6), p sau blockquote.
Am discutat aici cele mai comune comenzi. Puteți vizita Mozilla pentru o listă a tuturor comenzilor disponibile.
Cu ajutorul principiilor de bază, este timpul să creați bara de instrumente. Voi folosi pictogramele Font Awesome pentru butoane. S-ar putea să fi observat că lăsând deoparte câteva diferențe, toate ExecCommands au o structură similară. Putem folosi acest lucru în avantajul nostru utilizând următoarea marcaj pentru butoanele barei de instrumente:
În acest fel, ori de câte ori utilizatorii dau clic pe un buton, vom putea spune care versiune de ExecCommand pentru a utiliza pe baza valorii date de comandă atribut. Iată câteva butoane pentru referință:
H2
date de comandă valoarea atributului pentru primul buton este h2. După verificarea acestei valori în JavaScript, vom folosi funcția formatBlock versiunea ExecCommand metodă. În mod similar, pentru ultimul buton, superscript sugerează că trebuie să folosim nr valueArgument versiune a ExecCommand.
Crearea de culoarea din fata și culoare de fundal butoanele este o poveste diferită. Ele pun două probleme. În funcție de numărul de culori pe care le oferim utilizatorilor de a alege, scrierea acelui cod mult poate fi obositoare și predispusă la erori. Pentru a rezolva această problemă, putem folosi următorul cod JavaScript:
var colorPalette = ["000000", "FF9966", "6699FF", "99FF66", "CC0000", "00CC00", "0000CC", "333333", "0066FF", "FFFFFF"]; var forePalette = $ ("fore-palette"); pentru (var i = 0; i < colorPalette.length; i++) forePalette.append(''); Observați că și eu stabilesc a Date de valoare atribut pentru fiecare culoare. Acesta va fi folosit ulterior ca valueArgument în ExecCommand metodă.
Cea de-a doua problemă este că nu putem să arătăm multe culori tot timpul, pentru că ar necesita mult spațiu și ar duce la o experiență teribilă de utilizator. Folosind un mic CSS, putem asigura că paleta de culori apare numai atunci când un utilizator se deplasează peste butoanele respective. Marcajul pentru aceste butoane trebuie modificat și la următoarele:
Pentru a afișa numai paletele planare, avem nevoie de următorul CSS:
.paleta din față, paleta din spate display: none; .pentru-wrapper: hover .fore-paletă, .back-wrapper: hover .back-palet afișare: bloc; plutește la stânga; poziția: absolută;
Există multe alte reguli CSS în demo-ul CodePen pentru a face bara de instrumente mai frumoasă, dar toate acestea sunt necesare pentru funcționalitatea de bază.
Acum, este timpul să facem editorul nostru funcțional. Codul necesar pentru a face acest lucru este surprinzător de mic.
(comanda == 'h1' || comanda == 'h2' || comanda (comanda == 'h1' || comanda == 'h2' || comanda == 'p') document.execCommand ('formatBlock', false, comanda); (comanda == 'forecolor' || command == 'backcolor') document.execCommand (comanda == 'createlink' || command == 'insertimage') url = prompt ('Introduceți link-ul aici:') , 'http: \ / \'); document.execCommand ($ (this) .data ('comanda'), false, url); alt document.execCommand false, null););Începem prin atașarea unui eveniment clic pe toate butoanele barei de instrumente. De fiecare dată când se face clic pe un buton al barei de instrumente, stocăm valoarea date de comandă atributul butonului respectiv din variabila, comanda. Acesta este folosit mai târziu pentru a apela versiunea corespunzătoare a ExecCommand metodă. Ajută la scrierea unui cod concis și evită repetarea.
La setare culoarea din fata și culoare de fundal, Eu folosesc Date de valoare atributul ca al treilea argument. Creați link și insertImage nu au o constantă URL-ul valoare, deci folosim un prompt pentru a obține valorile de la utilizator. De asemenea, vă recomandăm să efectuați verificări suplimentare pentru a vă asigura că URL-ul este valabil. În cazul în care comanda variabila nu satisface niciuna dintre dacă blocuri, vom rula prima versiune de ExecCommand.
Acesta este aspectul editorului nostru WYSIWYG.
De asemenea, puteți implementa funcția de salvare automată utilizând localStorage pe care am discutat-o în ultimul meu tutorial.
Diferitele browsere au diferențe minore de implementare. De exemplu, rețineți că atunci când utilizați formatBlock, Internet Explorer acceptă numai etichete de rubrică h1 - h6, adresa și pre. De asemenea, trebuie să includeți delimitatoarele de etichete atunci când specificați numele comenzii ca .
Nu toate comenzile sunt acceptate de fiecare browser. Internet Explorer nu acceptă comenzi cum ar fi insertHTML și hiliteColor. asemănător, insertBrOnReturn este acceptată numai de Firefox. Puteți citi mai multe despre neconcordanțele browserului pe această pagină GitHub.
Crearea propriului dvs. editor WYSIWYG poate fi o experiență de învățare excelentă. În acest tutorial am acoperit o mulțime de comenzi și am folosit câteva CSS pentru stilul de bază. Ca exercițiu, aș sugera să încercați să implementați un buton al barei de instrumente pentru a seta font a unei selecții de text. Implementarea va fi similară cu cea a culoarea din fata buton.
Sper că ați iubit acest tutorial și ați învățat ceva nou. Dacă ați creat propriul editor WYSIWYG de la zero, nu ezitați să îl conectați la acesta în secțiunea de comentarii.
