Po mojem mnenju je CKEditor eden najboljših urejevalnikov wysiwyg za spletna mesta. Zadnje čase v njem se je pojavilo veliko blebetanja, da bi uporabniku poenostavili življenje, kar je na koncu v napoto, na primer ACF. Že vem, kako ga urediti in onemogočiti. Toda vrnimo se k temi našega članka: kako namestiti vtičnike na CKEditor.

Tu vidim dva pristopa.

Najprej gremo na spletno mesto urejevalnika in zase ponovno zgradimo CKeditor, vključno z vtičniki, ki jih potrebujemo. To se naredi na naslednji način. Gremo na spletno mesto ckeditor.com, pojdimo na zavihek za prenos. Nato izberite Ali naj prilagodim CKEditor

Toda v tem primeru niso prikazani vsi vtičniki. Če želite v gradnjo vključiti kakršne koli nove ali posebne vtičnike, morate gradnjo zgraditi nekoliko drugače. Pojdite na Dodatki -> Vtičniki in si oglejte naslednji premikajoči se meni na desni

Ko kliknete gumb dodaj v moj urejevalnik, se vtičnik doda sestavu. Ko končate, kliknite Zgradi moj urejevalnik in zamenjajte naš vgrajeni urejevalnik z ustvarjenim.

Drugi pristop je za tiste, ki se želijo sami poglobiti v kodo.

Na spletnem mestu ckeditor.com pojdite na razdelek add-ons->plug-ins in kliknite želeni vtičnik.

Izberite Prenos in sledite navodilom na spletnem mestu. Večinoma se bodisi spustijo na dejstvo, da morate namestiti odvisnosti za dani vtičnik in sam vtičnik registrirati v polju konfiguracijsko datoteko config.js in vtičnik, od katerega je odvisen namestitveni program, ločeni z vejicami, na primer

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

CKEditor je urejevalnik besedila HTML, pripravljen za uporabo, zasnovan za poenostavitev ustvarjanja vsebine spletnih strani. To je urejevalnik WYSIWYG, ki omogoča urejanje besedila neposredno na vaših spletnih straneh.

CKEditor je odprtokodna aplikacija izvorna koda, torej se lahko spremeni po vaših željah. Njegova uporabnost izhaja iz aktivne skupnosti, ki nikoli ne neha razvijati aplikacij z brezplačnimi dodatki in preglednim razvojnim procesom.

3-Prenesite CKEditor

Za prenos CKEditorja imate 4 možnosti.

Rezultat prenosa:

V mapi si lahko ogledate primere CKEditorja vzorcev:

4- Osnovni primeri:

Vsi primeri tega članka so v mapi vzorcev v CKEditorju, ki ste ga prenesli. Bom pa poskusila olajšati, da bo tebi lažje.

Ustvarite mapo moji primeri, se bodo primeri v tem članku nahajali v tej mapi.

4.1- Zamenjajte elemente Textarea z JavaScriptom

Preprost primer je uporaba CKEditor.replace(..) za zamenjavo prek CKEditor.

replacebycode.html

Zamenjaj Textarea s kodo Zamenjaj elemente Textarea s kodo JavaScript

Pozdravljeni CKEditor

CKEDITOR.replace("urejevalnik1");

Glej primer:

Rezultati izvajanja primera:

4.2- Zamenjajte elemente besedilnega polja z razredom imen

Z atributom ime, in razred ="ckeditor" bo samodejno zamenjal CKEditor.

Besedilo

zamenjaj porazredu.html

Zamenjaj Textarea z imenom razreda Zamenjaj elemente Textarea z imenom razreda

Pozdravljeni CKEditor

Izvajanje primera:

4.3- Ustvarite CKEditor z jQuery

Primer ustvarjanja CKEditorja z uporabo JQuery.

Adapter jQuery – vzorec CKEditor $(document).ready(function() ( $("#editor1").ckeditor(); )); funkcija setValue() ( $("#editor1").val($("input#val").val()); ) Ustvari urejevalnike z jQuery

Pozdravljeni CKEditor

Kot lahko vidite, so konfiguracije nastavljene s preprostim objektom JavaScript, posredovanim metodi create().

Odstranjevanje funkcij

Zgradbe so privzeto omogočene z vsemi funkcijami, vključenimi v distribucijski paket. Definirani so kot vtičniki za CKEditor.

V nekaterih primerih boste morda morali imeti v svoji aplikaciji različne nastavitve urejevalnika, ki bodo vse temeljile na isti zgradbi. V ta namen potrebujete za nadzor vtičnikov, ki so na voljo v urejevalniku med izvajanjem.

V spodnjem primeru sta vtičnika Heading in Link odstranjena:

// Odstranite nekaj vtičnikov iz privzete nastavitve. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], orodna vrstica : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(napaka => ( konzola .log(napaka); ));

Bodite previdni pri odstranjevanju vtičnikov iz zgradb CKEditor z uporabo config.removePlugins. Če so odstranjeni vtičniki zagotavljali gumbe orodne vrstice, bo privzeta konfiguracija orodne vrstice, vključena v gradnjo, postala neveljavna. V takem primeru morate zagotoviti posodobljeno konfiguracijo orodne vrstice, kot je prikazano v zgornjem primeru.

Seznam vtičnikov

Vsaka zgradba ima na voljo več vtičnikov. Preprosto lahko navedete vse vtičnike, ki so na voljo v vaši zgradbi:

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

Dodajanje kompleksnih funkcij

Ker gradnje CKEditor ne vključujejo vseh možnih funkcij, je edini način, da jim dodate več funkcij, ustvariti gradnjo po meri.

Dodajanje preprostih (samostojnih) funkcij

Pri vsakem pravilu obstaja izjema. Čeprav je nemogoče dodati vtičnike, ki so odvisni od @ckeditor/ckeditor5-core ali @ckeditor/ckeditor5-engine (ki vključuje skoraj vse obstoječe uradne vtičnike), ne da bi ponovno zgradili gradnjo, je vseeno mogoče dodati preproste vtičnike brez odvisnosti .

uvozite ClassicEditor iz "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Naloži adapter za nalaganje po meri kot vtičnik urejevalnika. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Nastavitev orodne vrstice

V zgradbah, ki vsebujejo orodne vrstice, je zanje definirana optimalna privzeta konfiguracija. Morda boste potrebovali drugačno razporeditev orodne vrstice in to lahko dosežete s konfiguracijo.

Vsak urejevalnik ima lahko drugačno konfiguracijsko shemo orodne vrstice, zato priporočamo, da preverite njegovo dokumentacijo. V vsakem primeru vam lahko naslednji primer da splošno idejo:

ClassicEditor .create(document .querySelector("#editor" ), ( orodna vrstica : [ "krepko" , "ležeče" , "povezava" ] )) .catch(error => ( console .log(error); ));

Zgoraj je stroga konfiguracija, povezana z uporabniškim vmesnikom. Odstranitev elementa orodne vrstice ne odstrani funkcije iz notranjosti urejevalnika. Če je vaš cilj s konfiguracijo orodne vrstice odstraniti funkcije, je prava rešitev, da odstranite tudi njihove ustrezne vtičnike. Preverite zgoraj za več informacij.

Seznam razpoložljivih predmetov

Za pridobitev vseh elementov orodne vrstice, ki so na voljo v vašem urejevalniku, lahko uporabite naslednji delček:

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

Na svoji spletni strani sem uporabil BUEditor - preprost, priročen urejevalnik, vendar ni zelo priročen za uporabnike. Pogosto sem razmišljal o namestitvi CKEditorja, vendar se mi je zdelo kot nekakšna pošast, v resnici pa se je vse izkazalo, da ni tako strašljivo.

Preberite, kako namestiti modul.

Po povezavi prek vašega modula na strani admin/config/content/ckeditor/edit/profile_assignment v zavihku NASTOP UREDNIKA, V poglavju Vtičniki Prikaže se potrditveno polje za aktivacijo. Vklopi, shrani, preveri.

3. Vstavljanje povezav. Pogovorno okno za vstavljanje povezav že vnaprej vsebuje kup nepotrebnih in nejasnih stvari. Nadomestimo ga z vtičnikom Simple link. Kako namestiti, glejte 2. korak. Poveži (glej točko 1):

Config.extraPlugins = "SimpleLink";

Pojavila se bo tudi nova ikona (gumb) vtičnika.

4. Vstavljanje slik. Tu je vse enako kot pri povezavah, za vstavljanje slik prek povezav lahko namestite vtičnik Simple Image.

Config.extraPlugins = "Enostavna slika";

Ali pa naložite slike z modulom za nalaganje z enim klikom. . Preberi več. Odločil sem se za drugo metodo, čeprav sem obe uporabil v BUEditorju.

Edina stvar, ki jo želim dodati, je, da vtičnik Enhanced Image zahteva še dva vtičnika Widget in Lineutils.

Nisem mogel razumeti, zakaj se vtičnik ni zagnal, dokler nisem pogledal dnevnika

5. Videz. Preobleka Moono je privzeto uporabljena, vendar sem želel videz prilagoditi videzu BUEditorja.

tako je izgledal BUEditor

7. Nadomestni znak. Če želite dodati ogrado, namestite vtičnik (glejte točko 2) Configuration Helper. Poveži (glej točko 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Naše besedilo"; // текст нашего placeholder !}

8. Smeški. Za nasmehe v CKEditorju je odgovoren vtičnik Insert Smiley, ki je vključen v standardni paket - Full Package.

Takole izgledajo smeški iz škatle:

Če jih želite zamenjati s svojimi, morate v konfiguraciji določiti pot do mape s slikami smiley_path (glejte 1. korak):

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

Vnesite imena datotek (slik), ki bodo prikazane smiley_images :

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

In opis (opis lebdenja) smiley_descriptions

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

Določite lahko tudi, v koliko stolpcih želite prikazati smeške (privzeto: 8) smiley_columns

Config.smiley_columns = 6;

Evo, kaj imam

9. Preverjanje črkovanja v brskalniku. Kot je UksusoFF zapisal v CKEditor, je preverjanje črkovanja v brskalniku onemogočeno.Če želite onemogočiti to onemogočanje (malo tavtologije), morate v konfiguracijo napisati:

Config.disableNativeSpellChecker = false;

10. Kontekstni meni. Ko v CKEditorju pritisnete RMB, se odpre kontekstni meni, ne izvorni meni brskalnika

Možnosti prenosa

Obstaja več možnosti za prenos gradenj CKEditor 5:

Po prenosu urejevalnika skočite na osnovni vodnik za API in si oglejte, kako ustvariti urejevalnike.

CDN

Graditve je mogoče naložiti znotraj strani neposredno iz , ki je optimiziran za izjemno hitro dostavo vsebine po vsem svetu. Pri uporabi CDN prenos pravzaprav ni potreben.

npm

Vse gradnje so izdane na npm. Uporabite to iskalno povezavo za ogled vseh uradnih gradbenih paketov, ki so na voljo v npm.

Namestitev gradnje z npm je tako preprosta kot klic enega od naslednjih ukazov v vašem projektu:

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

CKEditor bo nato na voljo na naslovu node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js. Prav tako ga je mogoče uvoziti neposredno v vašo kodo z require("@ckeditor/ckeditor5-build-") .

Zip prenos

Pojdite na in prenesite želeno gradnjo. Na primer, lahko prenesete datoteko ckeditor5-build-classic-1.0.0.zip za gradnjo klasičnega urejevalnika.

Ekstrahirajte datoteko .zip v namenski imenik znotraj vašega projekta. Priporočljivo je, da v ime imenika vključite različico urejevalnika, da zagotovite pravilno razveljavitev predpomnilnika, ko je nameščena nova različica CKEditor.

Vključene datoteke

• ckeditor.js – paket urejevalnikov, pripravljen za uporabo, ki vsebuje urejevalnik in vse vtičnike.
• ckeditor.js.map – Izvorni zemljevid za sveženj urejevalnika.
• prevodi/ – Prevodi uporabniškega vmesnika urejevalnika (glejte Nastavitev jezika uporabniškega vmesnika).
• README.md in LICENSE.md

Nalaganje API-ja

Po prenosu in namestitvi gradnje CKEditor 5 v vašo aplikacijo je čas, da API za urejevalnik omogočite na svojih straneh. V ta namen je dovolj, da naložite skript vstopne točke API:

Ko je skript CKEditor naložen, lahko