Po mom mišljenju, CKEditor je jedan od najboljih wysiwyg urednika za web stranice. U poslednje vreme u njemu se pojavilo mnogo gluposti kako bi se pojednostavio život korisnika, što na kraju stane na put, na primjer ACF. Već znam kako to urediti i onemogućiti. No, vratimo se na temu našeg članka: kako instalirati dodatke na CKEditor.

Ovdje vidim dva pristupa.

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

Ali u ovom slučaju, nisu prikazani svi dodaci. Da biste uključili bilo koje nove ili posebne dodatke u svoju gradnju, morate izgraditi svoju verziju malo drugačije. Idite na Dodaci -> Dodaci i pogledajte sljedeći pokretni meni s desne strane

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

Drugi pristup je za one koji su zainteresovani da sami uđu u kod.

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

Odaberite Preuzmi i slijedite upute sa stranice. Uglavnom se svode na činjenicu da morate instalirati ovisnosti za dati dodatak i registrirati sam dodatak u polju konfiguracijski fajl config.js i dodatak od kojeg ovisi instalater, odvojeni zarezima, na primjer,

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

CKEditor je HTML uređivač teksta spreman za upotrebu dizajniran da pojednostavi kreiranje sadržaja web stranice. Ovo je WYSIWYG editor koji pruža funkcije za uređivanje teksta direktno 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 da razvija aplikacije sa besplatnim dodacima i transparentnim procesom razvoja.

3-Preuzmite CKEditor

Imate 4 opcije za preuzimanje CKEditor-a.

Preuzmi rezultat:

Možete vidjeti primjere CKEditor-a u folderu uzorci:

4- Osnovni primjeri:

Svi primjeri ovog članka nalaze se u fascikli uzorci u CKEditor-u koji ste preuzeli. Ali ja ću se potruditi da to olakšam kako bi i vama bilo lakše.

Kreirajte folder myexamples, primjeri u ovom članku će se nalaziti u ovoj mapi.

4.1- Zamijenite Textarea elemente koristeći JavaScript

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

replacebycode.html

Zamijeni Textarea kodom Zamijeni Textarea elemente koristeći JavaScript kod

Zdravo CKEditor

CKEDITOR.replace("editor1");

Pogledajte primjer:

Rezultati pokretanja primjera:

4.2- Zamijenite elemente textarea sa imenom klase

Sa atributom ime, i klasa ="ckeditor" će automatski biti zamijenjena CKEditorom.

Tekst

replacebyclass.html

Zamijeni Textarea imenom klase Zamijeni Textarea elemente imenom klase

Zdravo CKEditor

Pokretanje primjera:

4.3- Kreirajte CKEditor sa jQuery

Primjer kreiranja CKEditor-a koristeći JQuery.

jQuery adapter - CKEditor uzorak $(document).ready(function() ( $("#editor1").ckeditor(); )); funkcija setValue() ( $("#editor1").val($("input#val").val()); ) Kreirajte uređivače pomoću jQueryja

Zdravo CKEditor

Kao što vidite, konfiguracije se postavljaju jednostavnim JavaScript objektom koji se prosljeđuje metodi create().

Uklanjanje karakteristika

Izgradnje dolaze sa svim funkcijama uključenim u distributivni paket koji su podrazumevano omogućeni. Definisani su kao dodaci za CKEditor.

U nekim slučajevima, možda ćete morati imati različite postavke uređivača u vašoj aplikaciji, sve na temelju iste verzije. u tu svrhu, ti trebas za kontrolu dodataka dostupnih u uređivaču za vrijeme izvođenja.

U primjeru ispod su uklonjeni dodaci Heading i Link:

// Uklonite nekoliko dodataka iz zadanih postavki. ClassicEditor .create(document .querySelector("#editor"), ( removePlugins : [ "Heading" , "Link" ], alatna traka: [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( console .log(error); ));

Budite oprezni kada uklanjate dodatke iz CKEditor build-ova koristeći config.removePlugins. Ako su uklonjeni dodaci pružali dugmad na traci sa alatkama, podrazumevana konfiguracija trake sa alatkama uključena u gradnju će postati nevažeća. U tom slučaju morate osigurati ažuriranu konfiguraciju alatne trake kao u gornjem primjeru.

Lista 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 karakteristika

Kako CKEditor verzije ne uključuju sve moguće karakteristike, jedini način da im dodate više funkcija je kreiranje prilagođene verzije.

Dodavanje jednostavnih (samostalnih) funkcija

Od svakog pravila postoji izuzetak. Iako je nemoguće dodati dodatke koji imaju zavisnosti na @ckeditor/ckeditor5-core ili @ckeditor/ckeditor5-engine (koji uključuje skoro sve postojeće zvanične dodatke) bez ponovne izgradnje, još uvijek je moguće dodati jednostavne dodatke bez ovisnosti .

uvoz ClassicEditor iz "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Učitavanje prilagođenog adaptera za upload kao dodatak uređivača. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Podešavanje trake sa alatkama

U verzijama koje sadrže trake s alatima definirana je optimalna zadana konfiguracija. Možda će vam trebati drugačiji raspored trake sa alatkama, a to se može postići konfiguracijom.

Svaki uređivač može imati različitu konfiguracijsku shemu trake sa alatkama, pa se preporučuje da provjerite njegovu dokumentaciju. U svakom slučaju, sljedeći primjer vam može dati opću ideju:

ClassicEditor .create(document .querySelector("#editor"), (traka sa alatkama: [ "bold" , "kurziv" , "link" ] )) .catch(error => ( console .log(error); ));

Gore navedeno je striktna konfiguracija vezana za korisničko sučelje. Uklanjanje stavke sa trake sa alatkama ne uklanja funkciju iz unutrašnjosti uređivača. Ako je vaš cilj sa konfiguracijom trake sa alatkama da uklonite funkcije, pravo rešenje je da uklonite i njihove odgovarajuće dodatke. Provjerite iznad za više informacija.

Popis dostupnih artikala

Možete koristiti sljedeći isječak za preuzimanje svih stavki trake sa alatkama koje su dostupne u vašem uređivaču:

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

Koristio sam BUEditor na svojoj web stranici - jednostavan, zgodan uređivač, ali nije baš pogodan za korisnike. Često sam razmišljao o instaliranju CKEditor-a, ali mi se to činilo nekakvim čudovištem, ali u stvarnosti se sve pokazalo da nije tako strašno.

Pročitajte kako instalirati modul.

Nakon povezivanja preko vašeg modula, na stranici admin/config/content/ckeditor/edit/profile_assignment na kartici IZGLED UREDNIKA, U poglavlju Dodaci Pojavit će se okvir za potvrdu aktivacije. Uključite, sačuvajte, provjerite.

3. Umetanje linkova. Izvan kutije, dijaloški okvir za umetanje veze sadrži gomilu nepotrebnih i nejasnih stvari. Zamijenjujemo ga dodatkom Simple link. Kako instalirati, pogledajte korak 2. Povežite se (vidi tačku 1):

Config.extraPlugins = "SimpleLink";

Također će se pojaviti nova ikona dodatka (dugme).

4. Umetanje slika. Ovdje je sve isto kao i sa linkovima; možete instalirati dodatak Simple Image za umetanje slika putem linkova.

Config.extraPlugins = "SimpleImage";

Ili otpremite slike pomoću modula za otpremanje jednim klikom. . Čitaj više. Odlučio sam se za drugu metodu, iako sam oba koristio u BUEditoru.

Jedina stvar koju želim da dodam 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 podrazumevano, ali sam želeo da izgled dovedem u izgled BUEditor-a.

ovako je izgledao BUEditor

7. Čuvar mjesta. Da biste dodali čuvar mjesta, instalirajte dodatak (pogledajte tačku 2) Configuration Helper. Povežite se (vidi tačku 1):

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

8. Smajliji. Dodatak Insert Smiley je odgovoran za osmijehe u CKEditor-u, uključen je u standardni paket - Full Package.

Ovako izgledaju smajlije iz kutije:

Da biste ih zamijenili svojim, morate navesti putanju do mape sa slikama smiley_path u konfiguraciji (pogledajte korak 1):

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

Unesite nazive fajlova (slika) koji će biti prikazani smiley_images :

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

I opis (opis lebdenja) smiley_descriptions

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

Također možete odrediti u koliko kolona treba prikazati smajlije (podrazumevano: 8) smiley_columns

Config.smiley_columns = 6;

Evo šta sam dobio

9. Provjera pravopisa u pretraživaču. Kao što je UksusoFF napisao u CKEditor-u, provjera pravopisa pretraživača je onemogućena.Da biste onemogućili ovo onemogućavanje (malo tautologija), potrebno je u konfiguraciju napisati:

Config.disableNativeSpellChecker = false;

10. Kontekstni meni. U CKEditoru, kada pritisnete RMB, otvara se kontekstni meni, a ne izvorni meni pretraživača

Opcije preuzimanja

Postoji nekoliko opcija za preuzimanje CKEditor 5 verzija:

Nakon preuzimanja uređivača idite na vodič za Basic API da vidite kako da kreirate uređivače.

CDN

Građevine se mogu učitavati unutar stranica direktno iz , koji je optimiziran za super brzu isporuku sadržaja širom svijeta. Kada koristite CDN, preuzimanje zapravo nije potrebno.

npm

Sve verzije su objavljene na npm. Koristite ovu vezu za pretragu da vidite sve zvanične build pakete dostupne u npm-u.

Instaliranje build-a s npm-om je jednostavno kao pozivanje 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 direktno 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 Classic editora.

Izvucite .zip datoteku u namjenski direktorij unutar vašeg projekta. Preporučljivo je uključiti verziju uređivača u ime direktorija kako biste osigurali ispravno poništavanje keša kada se instalira nova verzija CKEditor-a.

Uključeni fajlovi

• ckeditor.js – paket uređivača spreman za upotrebu, koji sadrži uređivač i sve dodatke.
• ckeditor.js.map – Izvorna mapa za paket uređivača.
• translations/ – Prevodi korisničkog interfejsa uređivača (pogledajte Podešavanje jezika korisničkog interfejsa).
• README.md i LICENSE.md

Učitavanje API-ja

Nakon što preuzmete i instalirate CKEditor 5 build u vašu aplikaciju, vrijeme je da učinite API uređivača dostupnim na vašim stranicama. U tu svrhu dovoljno je učitati skriptu API ulazne tačke:

Kada se CKEditor skripta učita, možete