Share
WYSIWYG redaktører er ganske populære. Du kan også ha brukt en på et tidspunkt. Det er mange biblioteker tilgjengelig for å hjelpe deg med å sette opp din egen redaktør. Selv om de er raske å sette opp, er det også ulemper ved bruk av disse bibliotekene. Til å begynne med er de oppblåst. De fleste av dem har fancy funksjoner som du kanskje ikke bruker. Videre kan tilpassing av utseendet til de redaktørene være hodepine.
I denne opplæringen vil vi bygge vår egen lette WYSIWYG-editor. Ved slutten av denne opplæringen har du en redaktør med grunnleggende formateringsfunksjoner som er utformet i henhold til dine preferanser.
La oss begynne med introduksjonen av execCommand. Vi bruker denne kommandoen for å implementere redaktøren vår omfattende.
execCommand er en metode for dokumentobjektet. Det tillater oss å manipulere innholdet i en redigerbar region. Ved bruk sammen med contenteditable, Det kan hjelpe oss med å lage en rik tekstredigerer. Det er mange kommandoer tilgjengelig som å legge til en lenke, og gjøre et valg modig eller kursiv, og endre skriftstørrelse eller farge. Denne metoden følger syntaksen:
document.execCommand (CommandName, ShowDefaultUI, ValueArgument);
kommandonavn er en streng som angir navnet på kommandoen som skal utføres. ShowDefaultUIer en boolsk for å indikere om støttegrensesnittet skal vises eller ikke. Dette alternativet er ikke fullt implementert, og det er best å sette det til feil. ValueArgument er en streng for å gi informasjon som bildeadresse eller Forecolor. Dette argumentet er satt til null når en kommando ikke krever at en verdi skal tre i kraft.
Vi må bruke forskjellige versjoner av denne metoden for å implementere ulike funksjoner. I de neste avsnittene vil jeg gå over alle dem en etter én.
Kommandoer som fet, rettferdiggjør, angre og gjenta trenger ikke en ValueArgument. I slike tilfeller bruker vi følgende syntaks:
document.execCommand (commandName, false, null);
kommandonavn er bare navnet på kommandoen som justifyCenter, justifyRight, modig, etc.
Kommandoer som InsertImage, create og Forecolor trenger et tredje argument for å fungere skikkelig. For disse kommandoene trenger du følgende syntaks:
document.execCommand (commandName, false, value);
Til InsertImage, verdien ville være URL-adressen til bildet som skal settes inn. I tilfelle av Forecolor, det ville være en fargevare som # FF9966 eller et navn som blå.
Hvis du legger til HTML-blokkertypekoder, må du bruke formatBlock som kommandonavn og taggenavnet som valueArgument. Syntaxen vil lignes på:
Accentsconagua
document.execCommand ('formatBlock', false, tagName);Denne metoden vil legge til en HTML-blokk-stil-tag rundt linjen som inneholder gjeldende utvalg. Det erstatter også noen tag som allerede eksisterte der. TagNavn kan være en av overskriftskodene (h1-h6), p eller blockquote.
Jeg har diskutert de vanligste kommandoene her. Du kan besøke Mozilla for en liste over alle tilgjengelige kommandoer.
Med det grunnleggende ut av veien, er det på tide å lage verktøylinjen. Jeg skal bruke Font Awesome ikoner for knappene. Du har kanskje lagt merke til at du forlater noen forskjeller, alle execCommands har en lignende struktur. Vi kan bruke dette til vår fordel ved å bruke følgende markering for verktøylinjeknapper:
På denne måten når brukere klikker på en knapp, vil vi kunne fortelle hvilken versjon av execCommand å bruke basert på verdien av data-kommando Egenskap. Her er noen knapper for referanse:
H2
De data-kommando Attributtverdien for den første knappen er h2. Etter å ha sjekket denne verdien i JavaScript, bruker vi formatBlock versjon av execCommand metode. Tilsvarende, for den siste knappen, hevet antyder at vi må bruke no valueArgument versjon av execCommand.
Opprette Forecolor og Back knapper er en annen historie. De utgjør to problemer. Avhengig av hvor mange farger vi gir brukerne å velge mellom, kan det være kjedelig og feilaktig å skrive så mye kode. For å takle dette problemet kan vi bruke følgende JavaScript-kode:
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66', 'CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF']; var forePalette = $ ('for-palette'); for (var i = 0; i < colorPalette.length; i++) forePalette.append(''); Legg merke til at jeg også setter inn en data-verdien attributt for hver farge. Dette vil senere bli brukt som valueArgument i execCommand metode.
Det andre problemet er at vi ikke kan vise så mange farger hele tiden, fordi det ville ta mye plass og resultere i en forferdelig brukeropplevelse. Ved å bruke et lite CSS, kan vi forsikre oss om at fargepaletten bare vises når en bruker svinger over respektive knapper. Markeringen for disse knappene må også endres til følgende:
For å bare vise palettene sveve, vi trenger følgende CSS:
.for-palette, .back-palette display: none; .fore-wrapper: hover .fore-palette, .back-wrapper: hover .back-palette display: block; flyte: venstre; posisjon: absolutt;
Det er mange andre CSS-regler i CodePen-demoen for å gjøre verktøylinjen vakrere, men dette er alt som trengs for kjernefunksjonaliteten.
Nå er det på tide å gjøre redaktøren vår funksjonell. Koden som kreves for å gjøre det er overraskende liten.
$ ('verktøylinje a'). klikk (funksjon (e) var kommando = $ (dette) .data ('kommando'); hvis kommando == 'h1' || kommando == 'h2' || == 'p') document.execCommand ('formatBlock', false, command); hvis (kommando == 'forecolor' || kommando == 'backcolor') document.execCommand ($ (this) .data 'kommando'), falsk, $ (dette) .data ('verdi')); hvis (kommando == 'createlink' || kommando == 'insertimage') url = prompt ('Skriv inn lenken her:' , 'http: \ / \'); document.execCommand ($ (dette) .data ('kommando'), falsk, url); else document.execCommand ($ (this) .data ('command') false, null););Vi begynner med å knytte en klikkhendelse til alle verktøylinjeknappene. Når en verktøylinjeknapp klikkes, lagrer vi verdien av data-kommando Attributt av den respektive knappen i variabelen, kommando. Dette brukes senere til å ringe den riktige versjonen av execCommand metode. Det hjelper med å skrive konsis kode og unngår gjentakelse.
Ved innstilling Forecolor og Back, Jeg bruker data-verdien Tilordne som det tredje argumentet. create og InsertImage har ikke en konstant url verdi, så vi bruker en ledetekst for å få verdiene fra brukeren. Du kan også gjerne utføre flere sjekker for å sikre at url er gyldig. Hvis kommando variabel tilfredsstiller ikke noe av hvis blokker, kjører vi den første versjonen av execCommand.
Slik ser vår WYSIWYG-editor ut.
Du kan også implementere funksjonen for automatisk lagring ved hjelp av lokal lagring som jeg diskuterte i min siste opplæring.
Ulike nettlesere har mindre implementeringsforskjeller. For eksempel, husk at når du bruker formatBlock, Internet Explorer støtter bare overskriftskoder h1 - h6, adresse og pre. Du må også inkludere taggrensene når du angir kommandonavn som .
Ikke alle kommandoer støttes av alle nettlesere. Internet Explorer støtter ikke kommandoer som insertHTML og hiliteColor. på samme måte, insertBrOnReturn støttes bare av Firefox. Du kan lese mer om inkonsekvenser i nettleseren på denne GitHub-siden.
Å lage din egen WYSIWYG-editor kan være en god læreropplevelse. I denne opplæringen har jeg dekket mange kommandoer og brukt noen CSS for grunnleggende styling. Som en øvelse foreslår jeg at du prøver å implementere en verktøylinjeknapp for å angi font av et tekstvalg. Gjennomføringen vil lignes til den av Forecolor knapp.
Jeg håper du elsket denne opplæringen og lærte noe nytt. Hvis du har opprettet din egen WYSIWYG-editor fra begynnelsen, kan du koble den til i kommentarfeltet.
