Etter min mening er CKEditor en av de beste wysiwyg-redaktørene for nettsteder. I det siste mye vrøvl har dukket opp i den for å forenkle brukerens liv, som til slutt kommer i veien, for eksempel ACF. Jeg vet allerede hvordan jeg redigerer og deaktiverer den. Men la oss gå tilbake til emnet for artikkelen vår: hvordan installere plugins på CKEditor.

Jeg ser to tilnærminger her.

Først går vi til redaktørens nettsted og bygger om CKeditor for oss selv, inkludert pluginene vi trenger. Dette gjøres som følger. Vi går til nettstedet ckeditor.com, går til nedlastingsfanen. Deretter velger du Eller la meg tilpasse CKEditor

Men i dette tilfellet vises ikke alle plugins. For å inkludere nye eller spesielle plugins i bygget ditt, må du bygge bygget litt annerledes. Gå til Add-ons -> Plug-ins og se følgende bevegelige meny til høyre

Når du klikker på legg til i redigeringsknappen min, legges plugin-en til forsamlingen. Når du er ferdig, klikker du på Bygg min editor og erstatter den innebygde editoren med den genererte.

Den andre tilnærmingen er for de som er interessert i å fordype seg i koden selv.

På nettstedet ckeditor.com, gå til tilleggs->plugin-delen og klikk på ønsket plugin.

Velg Last ned og følg instruksjonene fra nettstedet. For det meste kommer de enten ned på det faktum at du må installere avhengigheter for en gitt plugin og registrere selve plugin-en i feltet konfigurasjonsfil config.js og programtillegget som installasjonsprogrammet er avhengig av, atskilt med kommaer, for eksempel,

Config.extraPlugins = "codemirror,youtube,imagerotate";

CKEditor er en klar-til-bruk HTML-tekstredigerer designet for å forenkle opprettelsen av nettsideinnhold. Dette er et WYSIWYG-redigeringsprogram som gir tekstredigeringsfunksjoner direkte til nettsidene dine.

CKEditor er en åpen kildekode-applikasjon kildekode, det vil si at den kan endres på din forespørsel. Nytten kommer fra et aktivt fellesskap som aldri slutter å utvikle applikasjoner med gratis tillegg og en gjennomsiktig utviklingsprosess.

3-Last ned CKEditor

Du har 4 alternativer for å laste ned CKEditor.

Last ned resultat:

Du kan se eksempler på CKEditor i mappen prøver:

4- Grunnleggende eksempler:

Alle eksempler på denne artikkelen finnes i mappen prøver i CKEditor som du lastet ned. Men jeg skal prøve å gjøre det lettere slik at det blir lettere for deg.

Opprett en mappe mineeksempler, vil eksemplene i denne artikkelen være plassert i denne mappen.

4.1- Erstatt Textarea-elementer ved å bruke JavaScript

Et enkelt eksempel er å bruke CKEditor.replace(..) for å erstatte via CKEditor .

replacebycode.html

Erstatt Textarea med kode Erstatt Textarea-elementer ved å bruke JavaScript-kode

Hei CKEditor

CKEDITOR.replace("editor1");

Se eksempel:

Resultater av å kjøre eksemplet:

4.2- Erstatt tekstområdeelementer med navneklasse

Med å ha attributt Navn, og klassen ="ckeditor" vil automatisk erstattes av CKEditor.

Tekst

replacebyclass.html

Erstatt tekstområder med klassenavn Erstatt tekstområdeelementer med klassenavn

Hei CKEditor

Kjør eksempelet:

4.3- Lag CKEditor med jQuery

Et eksempel på å lage en CKEditor ved å bruke JQuery.

jQuery Adapter - CKEditor Eksempel $(document).ready(function() ( $("#editor1").ckeditor(); )); function setValue() ( $("#editor1").val($("input#val").val()); ) Opprett redaktører med jQuery

Hei CKEditor

Som du kan se, er konfigurasjoner satt av et enkelt JavaScript-objekt som sendes til create()-metoden.

Fjerner funksjoner

Bygger kommer med alle funksjoner inkludert i distribusjonspakken aktivert som standard. De er definert som plugins for CKEditor.

I noen tilfeller kan det hende du må ha forskjellige redigeringsoppsett i applikasjonen din, alle basert på samme bygg. For den grunnen, du trenger for å kontrollere pluginene som er tilgjengelige i editoren under kjøring.

I eksemplet nedenfor er Heading and Link-plugins fjernet:

// Fjern noen plugins fra standardoppsettet. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], verktøylinje : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(feil => ( konsoll .log(feil); ));

Vær forsiktig når du fjerner plugins fra CKEditor-bygg ved å bruke config.removePlugins. Hvis fjernede plugins ga verktøylinjeknapper, vil standard verktøylinjekonfigurasjon inkludert i en build bli ugyldig. I slike tilfeller må du oppgi den oppdaterte verktøylinjekonfigurasjonen som i eksempelet ovenfor.

Liste over plugins

Hver build har en rekke plugins tilgjengelig. Du kan enkelt liste opp alle plugins som er tilgjengelige i bygget ditt:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

Legge til funksjoner Legge til komplekse funksjoner

Siden CKEditor-bygg ikke inkluderer alle mulige funksjoner, er den eneste måten å legge til flere funksjoner på å lage en egendefinert build.

Legge til enkle (frittstående) funksjoner

Det er et unntak fra hver regel. Selv om det er umulig å legge til plugins som har avhengigheter til @ckeditor/ckeditor5-core eller @ckeditor/ckeditor5-engine (som inkluderer nesten alle eksisterende offisielle plugins) uten å gjenoppbygge bygget, er det fortsatt mulig å legge til enkle, avhengighetsfrie plugins .

importer ClassicEditor fra "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Last den tilpassede opplastingsadapteren som en plugin for editoren. ClassicEditor .create(dokument .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Verktøylinjeoppsett

I bygg som inneholder verktøylinjer er en optimal standardkonfigurasjon definert for den. Du kan imidlertid trenge et annet verktøylinjearrangement, og dette kan oppnås gjennom konfigurasjon.

Hver editor kan ha et annet verktøylinjekonfigurasjonsskjema, så det anbefales å sjekke dokumentasjonen. I alle fall kan følgende eksempel gi deg en generell idé:

ClassicEditor .create(dokument .querySelector("#editor" ), ( verktøylinje : [ "fet" , "kursiv" , "lenke" ] )) .catch(error => (konsoll .log(error); ));

Ovennevnte er en streng UI-relatert konfigurasjon. Fjerning av et verktøylinjeelement fjerner ikke funksjonen fra redigeringsprogrammet. Hvis målet ditt med verktøylinjekonfigurasjonen er å fjerne funksjoner, er den riktige løsningen å også fjerne deres respektive plugins. Sjekk ovenfor for mer informasjon.

Oppføring av tilgjengelige varer

Du kan bruke følgende kodebit for å hente alle verktøylinjeelementer som er tilgjengelige i redigeringsprogrammet:

Array .from(editor.ui.componentFactory.names());

Jeg brukte BUEditor på nettstedet mitt - en enkel, praktisk editor, men den er ikke veldig praktisk for brukerne. Jeg tenkte ofte på å installere CKEditor, men det virket som et slags monster for meg, men i virkeligheten viste alt seg å ikke være så skummelt.

Les hvordan du installerer modulen.

Etter å ha koblet til gjennom modulen, på admin/config/content/ckeditor/edit/profile_assignment-siden i fanen REDAKTØRENS UTSEENDE, I kapittel Plugins En aktiveringsavmerkingsboks vises. Slå på, lagre, sjekk.

3. Sette inn lenker. Ut av boksen inneholder dialogboksen for innsetting av koblinger en haug med unødvendige og uklare ting. Vi erstatter den med Simple link-plugin. Hvordan installere, se trinn 2. Koble til (se punkt 1):

Config.extraPlugins = "SimpleLink";

Et nytt plugin-ikon (knapp) vil også vises.

4. Sette inn bilder. Her er alt det samme som med lenker du kan installere Simple Image plugin for å sette inn bilder via lenker.

Config.extraPlugins = "SimpleImage";

Eller last opp bilder ved hjelp av One Click Upload-modulen. . Les mer. Jeg bestemte meg for den andre metoden, selv om jeg brukte begge i BUEditor.

Det eneste jeg vil legge til er at Enhanced Image-pluginen krever ytterligere to plugins Widget og Lineutils.

Jeg kunne ikke forstå hvorfor pluginen ikke startet før jeg så på loggen

5. Utseende. Moono-skinnet brukes som standard, men jeg ønsket å bringe utseendet til utseendet til BUEditor.

slik så BUEditor ut

7. Plassholder. For å legge til en plassholder, installer programtillegget (se punkt 2) Konfigurasjonshjelper. Koble til (se punkt 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Vår tekst"; // текст нашего placeholder !}

8. Smileys. Insert Smiley-pluginen er ansvarlig for smil i CKEditor, den er inkludert i standardpakken - Full Package.

Slik ser smileyene ut fra esken:

For å erstatte dem med dine egne, må du spesifisere banen til mappen med bilder smiley_path i konfigurasjonen (se trinn 1):

Config.smiley_path = "/sites/default/files/smileys/";

Skriv inn navnene på filene (bildene) som skal vises smiley_images :

Config.smiley_images = ["smile_1.png","smile_2.png"];

Og beskrivelse (svevebeskrivelse) smiley_descriptions

Config.smiley_descriptions = ["beskrivelse-1", "beskrivelse-2"];

Du kan også angi hvor mange kolonner som skal vises smileys i (standard: 8) smiley_columns

Config.smiley_columns = 6;

Her er hva jeg fikk

9. Stavekontroll i nettleseren. Som UksusoFF skrev i CKEditor, er stavekontroll i nettleseren deaktivert For å deaktivere denne deaktiveringen (litt av en tautologi), må du skrive i konfigurasjonen:

Config.disableNativeSpellChecker = usann;

10. Hurtigmeny. I CKEditor, når du trykker på RMB, åpnes en kontekstmeny, ikke den opprinnelige nettlesermenyen

Nedlastingsalternativer

Det er flere alternativer for å laste ned CKEditor 5-bygg:

Etter å ha lastet ned editoren, hopp til Basic API-guiden for å se hvordan du oppretter redaktører.

CDN

Bygg kan lastes inn på sider direkte fra , som er optimalisert for verdensomspennende superrask innholdslevering. Når du bruker CDN, er det faktisk ingen nedlasting nødvendig.

npm

Alle bygg er utgitt på npm. Bruk denne søkelenken for å se alle offisielle byggepakker som er tilgjengelige i npm.

Å installere en build med npm er like enkelt som å ringe en av følgende kommandoer i prosjektet ditt:

Npm install --save @ckeditor/ckeditor5-build-classic # Eller: npm install --save @ckeditor/ckeditor5-build-inline # Eller: npm install --save @ckeditor/ckeditor5-build-balloon # Eller: npm install --lagre @ckeditor/ckeditor5-build-balloon-block # Eller: npm install --lagre @ckeditor/ckeditor5-build-decoupled-document

CKEditor vil da være tilgjengelig på node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js . Den kan også importeres direkte til koden din ved å require("@ckeditor/ckeditor5-build-") .

Last ned zip

Gå til og last ned din foretrukne versjon. Du kan for eksempel laste ned filen ckeditor5-build-classic-1.0.0.zip for Classic editor-bygget.

Pakk ut .zip-filen til en dedikert katalog inne i prosjektet. Det anbefales å inkludere editorversjonen i katalognavnet for å sikre riktig cache-uvalidering når en ny versjon av CKEditor er installert.

Inkluderte filer

• ckeditor.js – Redaktørpakken som er klar til bruk, som inneholder editoren og alle plugins.
• ckeditor.js.map – Kildekartet for redigeringspakken.
• translations/ – Redaktørens UI-oversettelser (se Angi UI-språk).
• README.md og LICENSE.md

Laster inn API

Etter å ha lastet ned og installert en CKEditor 5-bygg i applikasjonen din, er det på tide å gjøre editor API tilgjengelig på sidene dine. For det formålet er det nok å laste inn API-inngangspunktskriptet:

Når CKEditor-skriptet er lastet, kan du