Podľa môjho názoru je CKEditor jedným z najlepších wysiwyg editorov pre webové stránky. V poslednej dobe objavilo sa v ňom veľa nezmyslov, aby sa zjednodušil život používateľa, čo v konečnom dôsledku prekáža, napríklad ACF. Už viem, ako to upraviť a vypnúť. Ale vráťme sa k téme nášho článku: ako nainštalovať pluginy na CKEditor.

Vidím tu dva prístupy.

Najprv prejdeme na webovú stránku editora a prerobíme si CKeditor pre seba vrátane doplnkov, ktoré potrebujeme. Toto sa robí nasledovne. Ideme na webovú stránku ckeditor.com, prejdite na kartu sťahovania. Ďalej vyberte položku Alebo mi dovoľte prispôsobiť CKEditor

V tomto prípade sa však nezobrazujú všetky doplnky. Ak chcete do zostavy zahrnúť akékoľvek nové alebo špeciálne doplnky, musíte zostavu zostaviť trochu inak. Prejdite na položku Doplnky -> Doplnky a pozrite si nasledujúcu pohyblivú ponuku vpravo

Keď kliknete na tlačidlo pridať do môjho editora, doplnok sa pridá do zostavy. Po dokončení kliknite na Vytvoriť môj editor a nahraďte náš vstavaný editor vygenerovaným editorom.

Druhý prístup je pre tých, ktorí majú záujem ponoriť sa do kódu sami.

Na webovej stránke ckeditor.com prejdite do časti doplnky->doplnky a kliknite na požadovaný doplnok.

Vyberte možnosť Stiahnuť a postupujte podľa pokynov na lokalite. Väčšinou ide buď o to, že je potrebné nainštalovať závislosti pre daný plugin a zaregistrovať samotný plugin v poli konfiguračný súbor config.js a plugin, na ktorom závisí inštalačný program, oddelené čiarkami, napr.

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

CKEditor je textový editor HTML pripravený na použitie, ktorý je určený na zjednodušenie tvorby obsahu webových stránok. Toto je WYSIWYG editor, ktorý poskytuje funkcie na úpravu textu priamo na vašich webových stránkach.

CKEditor je open source aplikácia zdrojový kód, to znamená, že sa dá zmeniť podľa vášho želania. Jeho užitočnosť pochádza z aktívnej komunity, ktorá nikdy neprestane vyvíjať aplikácie s bezplatnými doplnkami a transparentným procesom vývoja.

3-Stiahnite si CKEditor

Na stiahnutie CKEditoru máte 4 možnosti.

Výsledok stiahnutia:

Príklady programu CKEditor si môžete pozrieť v priečinku vzorky:

4- Základné príklady:

Všetky príklady tohto článku sú obsiahnuté v priečinku vzorky v CKEditor, ktorý ste si stiahli. Ale pokúsim sa vám to uľahčiť, aby to bolo pre vás jednoduchšie.

Vytvorte priečinok moje príklady, príklady v tomto článku budú umiestnené v tomto priečinku.

4.1- Nahradenie prvkov Textarea pomocou JavaScriptu

Jednoduchým príkladom je použitie CKEditor.replace(..) na nahradenie cez CKEditor .

nahradiť kódom.html

Nahradiť textovú oblasť kódom Nahradiť prvky textovej oblasti pomocou kódu JavaScript

Dobrý deň, redaktor CK

CKEDITOR.replace("editor1");

Pozrite si príklad:

Výsledky spustenia príkladu:

4.2- Nahraďte prvky textovej oblasti triedou názvu

S prívlastkom názov, a trieda ="ckeditor" bude automaticky nahradená CKEditorom.

Text

nahradiť triedou.html

Nahradiť textové oblasti názvom triedy Nahradiť prvky textovej oblasti názvom triedy

Dobrý deň, redaktor CK

Spustenie príkladu:

4.3- Vytvorte CKEditor pomocou jQuery

Príklad vytvorenia CKEditora pomocou JQuery.

jQuery Adapter - CKEditor Sample $(document).ready(function() ( $("#editor1").ckeditor(); )); function setValue() ( $("#editor1").val($("input#val").val()); ) Vytváranie editorov pomocou jQuery

Dobrý deň, redaktor CK

Ako vidíte, konfigurácie sa nastavujú jednoduchým objektom JavaScript odovzdaným do metódy create().

Odstraňovanie funkcií

Zostavy sa dodávajú so všetkými funkciami zahrnutými v distribučnom balíku, ktoré sú štandardne povolené. Sú definované ako pluginy pre CKEditor.

V niektorých prípadoch možno budete musieť mať vo svojej aplikácii rôzne nastavenia editora, všetky založené na rovnakej zostave. Za týmto účelom potrebuješ na ovládanie pluginov dostupných v editore za behu.

V nižšie uvedenom príklade sú odstránené doplnky nadpisov a odkazov:

// Odstráňte niekoľko doplnkov z predvoleného nastavenia. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], panel s nástrojmi : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( console .log(error); ));

Buďte opatrní pri odstraňovaní pluginov zo zostavení CKEditor pomocou config.removePlugins. Ak odstránené doplnky poskytovali tlačidlá panela s nástrojmi, predvolená konfigurácia panela nástrojov zahrnutá v zostave sa stane neplatnou. V takom prípade musíte poskytnúť aktualizovanú konfiguráciu panela s nástrojmi ako v príklade vyššie.

Zoznam pluginov

Každá zostava má k dispozícii množstvo doplnkov. Môžete jednoducho uviesť zoznam všetkých doplnkov dostupných vo vašej zostave:

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

Pridávanie zložitých funkcií

Keďže zostavy CKEditor neobsahujú všetky možné funkcie, jediným spôsobom, ako k nim pridať ďalšie funkcie, je vytvoriť vlastnú zostavu .

Pridanie jednoduchých (samostatných) funkcií

Z každého pravidla existuje výnimka. Aj keď nie je možné pridať doplnky, ktoré majú závislosti na @ckeditor/ckeditor5-core alebo @ckeditor/ckeditor5-engine (ktoré zahŕňajú takmer všetky existujúce oficiálne doplnky) bez prebudovania zostavy, stále je možné pridať jednoduché doplnky bez závislostí. .

importovať ClassicEditor z "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Načítajte vlastný adaptér na nahrávanie ako doplnok editora. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Nastavenie panela s nástrojmi

V zostavách, ktoré obsahujú panely nástrojov, je preň definovaná optimálna predvolená konfigurácia. Možno však budete potrebovať iné usporiadanie panela s nástrojmi, a to sa dá dosiahnuť konfiguráciou.

Každý editor môže mať inú schému konfigurácie panela nástrojov, preto sa odporúča skontrolovať jeho dokumentáciu. V každom prípade vám nasledujúci príklad môže poskytnúť všeobecnú predstavu:

ClassicEditor .create(document .querySelector("#editor" ), ( panel nástrojov : [ "tučné" , "kurzíva" , "odkaz" ] )) .catch(error => ( console .log(error); ));

Vyššie uvedené je prísna konfigurácia súvisiaca s používateľským rozhraním. Odstránenie položky panela s nástrojmi neodstráni funkciu z vnútorných častí editora. Ak je vaším cieľom pri konfigurácii panela s nástrojmi odstrániť funkcie, správnym riešením je odstrániť aj ich príslušné doplnky. Viac informácií nájdete vyššie.

Zoznam dostupných položiek

Nasledujúci úryvok môžete použiť na načítanie všetkých položiek panela s nástrojmi dostupných vo vašom editore:

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

Na svojej webovej stránke som použil BUEditor - jednoduchý, pohodlný editor, ktorý však nie je pre používateľov príliš pohodlný. Často som premýšľal o inštalácii CKEditor, ale zdalo sa mi to ako nejaké monštrum, ale v skutočnosti sa ukázalo, že všetko nie je také strašidelné.

Prečítajte si, ako nainštalovať modul.

Po pripojení cez váš modul na stránke admin/config/content/ckeditor/edit/profile_assignment na karte VZHĽAD REDAKTORA, V kapitole Pluginy Zobrazí sa začiarkavacie políčko aktivácie. Zapnúť, uložiť, skontrolovať.

3. Vkladanie odkazov. Po vybalení obsahuje dialógové okno vloženia odkazu množstvo nepotrebných a nejasných vecí. Nahrádzame ho pluginom Simple link. Ako nainštalovať, pozrite si krok 2. Pripojiť (pozri bod 1):

Config.extraPlugins = "SimpleLink";

Objaví sa aj nová ikona (tlačidlo) pluginu.

4. Vkladanie obrázkov. Tu je všetko rovnaké ako pri odkazoch, môžete si nainštalovať doplnok Simple Image na vkladanie obrázkov cez odkazy.

Config.extraPlugins = "SimpleImage";

Alebo nahrajte obrázky pomocou modulu Odovzdanie jedným kliknutím. . Čítaj viac. Rozhodol som sa pre druhú metódu, hoci v BUEditore som používal obe.

Jediná vec, ktorú chcem dodať, je, že doplnok Enhanced Image vyžaduje ďalšie dva doplnky Widget a Lineutils.

Nevedel som pochopiť, prečo sa doplnok nespustil, kým som sa nepozrel na denník

5. Vzhľad. V predvolenom nastavení sa používa vzhľad Moono, ale chcel som priniesť vzhľad do vzhľadu BUEditoru.

takto vyzeral BUEditor

7. Zástupný symbol. Ak chcete pridať zástupný symbol, nainštalujte doplnok (pozri bod 2) Pomocník konfigurácie. Pripojiť (pozri bod 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Náš text"; // текст нашего placeholder !}

8. Smajlíky. Za úsmevy v CKEditore je zodpovedný plugin Insert Smiley, ktorý je súčasťou štandardného balíka - Full Package.

Takto vyzerajú smajlíky po vybalení z krabice:

Ak ich chcete nahradiť vlastnými, musíte v konfigurácii zadať cestu k priečinku s obrázkami smiley_path (pozri krok 1):

Config.smiley_path = "/sites/default/files/smajlíky/";

Zadajte názvy súborov (obrázkov), ktoré sa zobrazia smajlíky :

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

A popis (popis po umiestnení kurzora myši) smiley_descriptions

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

Môžete tiež určiť, v koľkých stĺpcoch sa majú zobraziť smajlíky v (predvolená hodnota: 8) smiley_columns

Config.smiley_columns = 6;

Tu je to, čo som dostal

9. Kontrola pravopisu v prehliadači. Ako napísal UksusoFF v CKEditor, kontrola pravopisu v prehliadači je zakázaná. Ak chcete vypnúť toto zakázanie (trochu tautológia), musíte do konfigurácie napísať:

Config.disableNativeSpellChecker = false;

10. Kontextové menu. V CKEditor sa po stlačení RMB otvorí kontextová ponuka, nie natívna ponuka prehliadača

Možnosti sťahovania

Existuje niekoľko možností, ako stiahnuť zostavy CKEditor 5:

Po stiahnutí editora prejdite na Sprievodcu základným rozhraním API a zistite, ako vytvoriť editory.

CDN

Zostavy je možné načítať na stránkach priamo z , ktorý je optimalizovaný pre celosvetové super rýchle doručovanie obsahu. Pri použití CDN nie je v skutočnosti potrebné žiadne sťahovanie.

npm

Všetky zostavy sú vydané na npm. Použite tento odkaz na vyhľadávanie na zobrazenie všetkých oficiálnych balíčkov zostavy dostupných v npm.

Inštalácia zostavy pomocou npm je taká jednoduchá ako zavolanie jedného z nasledujúcich príkazov vo vašom projekte:

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

CKEditor bude potom dostupný na node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js. Dá sa tiež importovať priamo do vášho kódu pomocou require("@ckeditor/ckeditor5-build-") .

Sťahovanie zip

Prejdite na stránku a stiahnite si preferovanú zostavu. Môžete si napríklad stiahnuť súbor ckeditor5-build-classic-1.0.0.zip pre zostavu editora Classic.

Extrahujte súbor .zip do vyhradeného adresára vo vašom projekte. Odporúča sa zahrnúť verziu editora do názvu adresára, aby sa zabezpečilo správne zrušenie platnosti vyrovnávacej pamäte po nainštalovaní novej verzie CKEditor.

Zahrnuté súbory

• ckeditor.js – Balík editorov pripravený na použitie, ktorý obsahuje editor a všetky doplnky.
• ckeditor.js.map – zdrojová mapa pre balík editorov.
• preklady/ – Preklady používateľského rozhrania editora (pozri Nastavenie jazyka používateľského rozhrania).
• README.md a LICENSE.md

Načítava sa rozhranie API

Po stiahnutí a inštalácii zostavy CKEditor 5 do vašej aplikácie je čas sprístupniť rozhranie API editora na vašich stránkach. Na tento účel stačí načítať skript vstupného bodu API:

Po načítaní skriptu CKEditor môžete