Po mom mišljenju, CKEditor je jedan od najboljih wysiwyg uređivača za web stranice. U zadnje vrijeme u njemu se pojavilo mnogo besmislica kako bi se korisniku pojednostavio život, što u konačnici smeta, na primjer ACF. Već znam kako to urediti i onemogućiti. Ali vratimo se na temu našeg članka: kako instalirati dodatke na CKEditor.

Ja tu vidim dva pristupa.

Prvo, idemo na web stranicu urednika i ponovno gradimo CKeditor za sebe, uključujući dodatke koji su nam potrebni. To se radi na sljedeći način. Idemo na web mjesto ckeditor.com, idemo na karticu za preuzimanje. Zatim odaberite Ili dopusti da prilagodim CKEditor

Ali u ovom slučaju nisu prikazani svi dodaci. Da biste uključili bilo kakve nove ili posebne dodatke u svoju međugradnju, morate je izgraditi malo drugačije. Idite na Dodaci -> Dodaci i pogledajte sljedeći pokretni izbornik s desne strane

Kada kliknete gumb dodaj u moj uređivač, dodatak se dodaje u sklop. Kada završite, kliknite Izradi moj uređivač i zamijenite naš ugrađeni uređivač generiranim.

Drugi pristup je za one koji su zainteresirani sami proniknuti u kod.

Na web stranici ckeditor.com idite na odjeljak add-ons->plug-ins i kliknite željeni dodatak.

Odaberite Preuzmi i slijedite upute sa stranice. Uglavnom se ili svode na činjenicu da trebate instalirati ovisnosti za određeni dodatak i registrirati sam dodatak u polju konfiguracijska datoteka config.js i dodatak o kojem ovisi instalacijski program, odvojeni zarezima, na primjer,

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

CKEditor je HTML uređivač teksta spreman za korištenje dizajniran da pojednostavi stvaranje sadržaja web stranice. Ovo je WYSIWYG uređivač koji omogućuje funkcije uređivanja teksta izravno na vašim web stranicama.

CKEditor je aplikacija otvorenog koda izvorni kod, odnosno može se mijenjati po Vašoj želji. Njegova korisnost dolazi od aktivne zajednice koja nikada ne prestaje razvijati aplikacije s besplatnim dodacima i transparentnim procesom razvoja.

3-Preuzmite CKEditor

Imate 4 opcije za preuzimanje CKEditora.

Rezultat preuzimanja:

Možete vidjeti primjere CKEditora u mapi uzorci:

4- Osnovni primjeri:

Svi primjeri ovog članka nalaze se u mapi uzorci u CKEditoru koji ste preuzeli. Ali pokušat ću to olakšati kako bi vama bilo lakše.

Stvorite mapu moji primjeri, primjeri u ovom članku nalazit će se u ovoj mapi.

4.1- Zamijenite elemente Textarea koristeći JavaScript

Jednostavan primjer je korištenje CKEditor.replace(..) za zamjenu putem CKEditora.

replacebycode.html

Zamijeni Textarea kodom Zamijeni elemente Textarea pomoću JavaScript koda

Pozdrav CKEditor

CKEDITOR.replace("urednik1");

Pogledajte primjer:

Rezultati izvođenja primjera:

4.2- Zamijenite elemente textarea s name class

S posjedovanjem atributa Ime, a class="ckeditor" će automatski biti zamijenjen CKEditor-om.

Tekst

zamijeni poklasi.html

Zamijeni Textareas imenom klase Zamijeni elemente Textarea imenom klase

Pozdrav CKEditor

Pokretanje primjera:

4.3- Stvorite CKEditor s jQueryjem

Primjer stvaranja CKEditora pomoću JQueryja.

jQuery adapter - CKEditor primjer $(document).ready(function() ( $("#editor1").ckeditor(); )); funkcija setValue() ( $("#editor1").val($("input#val").val()); ) Stvaranje uređivača s jQueryjem

Pozdrav CKEditor

Kao što vidite, konfiguracije su postavljene jednostavnim JavaScript objektom proslijeđenim metodi create().

Uklanjanje značajki

Međuverzije dolaze sa svim značajkama uključenim u distribucijski paket omogućenim prema zadanim postavkama. Definirani su kao dodaci za CKEditor.

U nekim slučajevima, možda ćete morati imati različite postavke uređivača u svojoj aplikaciji, sve temeljene na istoj verziji. U tu svrhu, trebaš za kontrolu dodataka dostupnih u uređivaču tijekom izvođenja.

U donjem primjeru dodaci Naslov i Veza su uklonjeni:

// Uklonite nekoliko dodataka iz zadane postavke. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(greška => ( konzola .log(greška); ));

Budite oprezni kada uklanjate dodatke iz CKEditor buildova koristeći config.removePlugins. Ako su uklonjeni dodaci pružali gumbe alatne trake, zadana konfiguracija alatne trake uključena u međugradnju postat će nevažeća. U tom slučaju trebate osigurati ažuriranu konfiguraciju alatne trake kao u gornjem primjeru.

Popis dodataka

Svaka verzija ima nekoliko dostupnih dodataka. Možete jednostavno navesti sve dodatke dostupne u vašoj verziji:

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

Dodavanje složenih značajki

Budući da međugradnje CKEditor-a ne uključuju sve moguće značajke, jedini način da im dodate još značajki jest stvaranje prilagođene međugradnje.

Dodavanje jednostavnih (samostalnih) značajki

U svakom pravilu postoji iznimka. Iako je nemoguće dodati dodatke koji imaju ovisnosti o @ckeditor/ckeditor5-core ili @ckeditor/ckeditor5-engine (koji uključuje gotovo sve postojeće službene dodatke) bez ponovne izgradnje, još uvijek je moguće dodati jednostavne dodatke bez ovisnosti .

import ClassicEditor iz "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Učitaj prilagođeni adapter za učitavanje kao dodatak uređivača. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Postavljanje alatne trake

U verzijama koje sadrže alatne trake za njih je definirana optimalna zadana konfiguracija. Ipak, možda ćete trebati drugačiji raspored alatne trake, a to se može postići konfiguracijom.

Svaki uređivač može imati drugačiju konfiguracijsku shemu alatne trake, stoga se preporuča provjeriti njegovu dokumentaciju. U svakom slučaju, sljedeći primjer može vam dati opću ideju:

ClassicEditor .create(document .querySelector("#editor" ), ( toolbar : [ "bold" , "italic" , "link" ] )) .catch(error => ( console .log(error); ));

Gore navedeno je stroga konfiguracija povezana s korisničkim sučeljem. Uklanjanje stavke alatne trake ne uklanja značajku iz internih dijelova uređivača. Ako je vaš cilj s konfiguracijom alatne trake ukloniti značajke, pravo rješenje je također ukloniti njihove odgovarajuće dodatke. Provjerite gore za više informacija.

Popis dostupnih artikala

Možete upotrijebiti sljedeći isječak za dohvaćanje svih stavki alatne trake dostupne u vašem uređivaču:

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

Koristio sam BUEditor na svojoj web stranici - jednostavan, praktičan uređivač, ali nije baš zgodan za korisnike. Često sam razmišljao o instaliranju CKEditora, ali činilo mi se kao nekakvo čudovište, ali u stvarnosti se pokazalo da sve nije tako strašno.

Pročitajte kako instalirati modul.

Nakon povezivanja putem vašeg modula, na stranici admin/config/content/ckeditor/edit/profile_assignment u kartici NASTUP UREDNIKA, U poglavlju Dodaci Pojavit će se potvrdni okvir za aktivaciju. Uključi, spremi, provjeri.

3. Umetanje poveznica. Izvan okvira, dijaloški okvir za umetanje veze sadrži hrpu nepotrebnih i nejasnih stvari. Zamjenjujemo ga dodatkom Simple link. Kako instalirati, pogledajte korak 2. Spojite (vidi točku 1):

Config.extraPlugins = "Jednostavna veza";

Pojavit će se i nova ikona (gumb) dodatka.

4. Umetanje slika. Ovdje je sve isto kao i s linkovima, možete instalirati dodatak Simple Image za umetanje slika preko linkova.

Config.extraPlugins = "Jednostavna slika";

Ili učitajte slike koristeći modul One Click Upload. . Čitaj više. Odlučio sam se za drugu metodu, iako sam obje koristio u BUEditoru.

Jedino što želim dodati je da dodatak Enhanced Image zahtijeva još dva dodatka Widget i Lineutils.

Nisam mogao razumjeti zašto se dodatak nije pokrenuo dok nisam pogledao dnevnik

5. Izgled. Moono skin se koristi prema zadanim postavkama, ali sam želio dovesti izgled na izgled BUEditora.

ovako je izgledao BUEditor

7. Rezervirano mjesto. Da biste dodali rezervirano mjesto, instalirajte dodatak (pogledajte točku 2) Configuration Helper. Spojite (vidi točku 1):

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

8. Smajliji. Za osmjehe u CKEditoru odgovoran je dodatak Insert Smiley koji je uključen u standardni paket - Full Package.

Ovako izgledaju smajliji kad su iz kutije:

Da biste ih zamijenili svojima, trebate navesti put do mape sa slikama smiley_path u konfiguraciji (pogledajte korak 1):

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

Unesite nazive datoteka (slika) koje će biti prikazane smiley_images :

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

I opis (lebdeći opis) smiley_descriptions

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

Također možete odrediti u koliko stupaca želite prikazati smajliće (zadano: 8) smiley_columns

Config.smiley_columns = 6;

Evo što sam dobio

9. Provjera pravopisa u pregledniku. Kao što je UksusoFF napisao u CKEditoru, provjera pravopisa u pregledniku je onemogućena. Da biste onemogućili ovo onemogućavanje (malo tautologije), morate napisati u konfiguraciji:

Config.disableNativeSpellChecker = false;

10. Kontekstni izbornik. U CKEditoru, kada pritisnete RMB, otvara se kontekstni izbornik, a ne izvorni izbornik preglednika

Opcije preuzimanja

Postoji nekoliko opcija za preuzimanje CKEditor 5 međuverzija:

Nakon preuzimanja uređivača skočite na Osnovni API vodič da vidite kako izraditi uređivače.

CDN

Builds se mogu učitati unutar stranica izravno iz , koji je optimiziran za super brzu isporuku sadržaja širom svijeta. Kada koristite CDN, preuzimanje zapravo nije potrebno.

npm

Sve su verzije objavljene na npm-u. Upotrijebite ovu poveznicu za pretraživanje da vidite sve službene pakete za izgradnju dostupne u npm-u.

Instaliranje međugradnje s npm-om jednostavno je poput pozivanja jedne od sljedećih naredbi u vašem projektu:

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

CKEditor će tada biti dostupan na node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js. Također se može uvesti izravno u vaš kod pomoću require("@ckeditor/ckeditor5-build-") .

Zip preuzimanje

Idite na i preuzmite željenu verziju. Na primjer, možete preuzeti datoteku ckeditor5-build-classic-1.0.0.zip za verziju klasičnog uređivača.

Ekstrahirajte .zip datoteku u namjenski direktorij unutar vašeg projekta. Preporuča se uključiti verziju uređivača u ime direktorija kako bi se osiguralo ispravno poništavanje predmemorije nakon što se instalira nova verzija CKEditor-a.

Uključene datoteke

• ckeditor.js – paket uređivača spreman za korištenje, koji sadrži uređivač i sve dodatke.
• ckeditor.js.map – Izvorna mapa za paket uređivača.
• prijevodi/ – Prijevodi korisničkog sučelja urednika (pogledajte Postavljanje jezika korisničkog sučelja).
• README.md i LICENSE.md

Učitavanje API-ja

Nakon preuzimanja i instaliranja nadogradnje CKEditor 5 u vašoj aplikaciji, vrijeme je da API za uređivanje bude dostupan na vašim stranicama. U tu svrhu dovoljno je učitati API ulaznu skriptu:

Nakon što se CKEditor skripta učita, možete