Aplikacije i softver 

Povezivanje ckeditora. Postavljanje CKEdita ili kako ukloniti nepotrebne ikone na ploči. Promjena jezika

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 kod poveznica; možete instalirati dodatak Simple Image za umetanje slika putem poveznica.

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. Dodatak Insert Smiley odgovoran je za osmjehe u CKEditoru; uključen je 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 će se prikazati osmjesi (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 preglednika 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

Sadržaj

Prilikom izrade uređivača na vašoj stranici, moguće je postaviti konfiguracije koje mijenjaju mnoge njegove aspekte. Na primjer:

ClassicEditor .create(document .querySelector("#editor"), ( alatna traka : [ "heading" , "|" , "bold" , "italic" , "link" , "bulletedList" , "numberedList" , "blockQuote" ] , naslov: ( opcije: [ (model: "odlomak", naslov: "Odlomak", klasa: "ck-heading_paragraph"), (model: "naslov1", pogled: "h1", naslov: "Naslov 1", klasa : "ck-heading_heading1" ), ( model : "heading2" , prikaz : "h2" , naslov : "Heading 2" , klasa : "ck-heading_heading2" ) ] ) )) .catch(error =>

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 morate kontrolirati dodatke koji su dostupni 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 značajki 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 je 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());

Ovaj članak će vam pokazati kako instalirati vizualni uređivač na svoju web stranicu. Ovaj uređivač je vrlo prikladan za dodavanje i/ili uređivanje novih informacija za web mjesto. Na primjer, instalacija na forumu, u bloku s komentarima, koja olakšava i proširuje mogućnosti uređivanja teksta novog komentara, tj. možete označiti tekst, podcrtati ga, umetnuti poveznicu i još mnogo toga, sve ovisi o tome koliko pristupa date svom čitatelju. I, naravno, ono što ne smijemo zaboraviti je admin dio koji vam može značajno olakšati posao pri dodavanju i uređivanju materijala.

Radio sam s dva vizualna editora: Tinymce i CK Editor, iako su ova dva editora prilično popularna, bit ću iskren, više mi se svidio CK Editor, odnosno bio je prikladniji za moje zadatke. Stoga ćemo ovdje pogledati kako instalirati CK Editor, a reći ću vam drugi put.

Prvo, kao i uvijek, moramo preuzeti uređivač, možete preuzeti puni paket ili odabrati sve potrebne pakete na službenoj web stranici.

Nakon završetka preuzimanja, raspakirajte preuzetu arhivu, na primjer, u mapu libs koja se nalazi u korijenu stranice. U index.html, između oznaka povezujemo ckeditor.js editor plugin i, naravno, jquery biblioteku.

HTML

I tako, sve što preostaje je stvoriti obrazac s testnim poljem s kojim će naš urednik komunicirati.

HTML

CKEDITOR.replace("urednik1");

Općenito, sve o instalaciji, nakon učitavanja stranice, tekst editor bi se već trebao pojaviti u navedenom tekstualnom polju. Ovaj uređivač možete prilagoditi svom ukusu; možete promijeniti pozadinu okvira uređivača ili jezik, možete postaviti širinu i visinu prozora. Da biste to učinili, koristite datoteku config.js koja se nalazi u mapi libs/ckeditor/config.js. U ovoj datoteci možemo postaviti gore navedene postavke i mnoge druge. Više detalja na službenim stranicama.

Na primjer, s promjenama u datoteci config.js prikazanim u nastavku promijenit ćemo jezik, boju obruba i visinu uređivača.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.language = "en"; //language config.uiColor = "#AADC6E"; //boja okvira config.height = 300; //visina okvira);

Također možete promijeniti izgled uređivača postavljanjem config.toolbarBasic - minimum ili Full - maksimum funkcija uređivača. Ili možete prilagoditi uređivač pomoću postavke config.toolbar_Basic kao što je prikazano u primjeru ispod.

Ako odaberete minimalnu konfiguraciju, mogućnosti uređivača bit će ograničene i bit će dostupni samo sljedeći gumbi: postavite podebljani tekst, kurziv font, popise, stvorite vezu, izbrišite vezu i emotikone (pogledajte primjer u nastavku).

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.width = 1050; //širina prozora uređivača config.toolbar = "Basic"; //funkcionalnost uređivača, Basic-minimum, Full-maximum config.toolbar_Basic = //individualna postavka Basic-a način rada [ ["Podebljano", "Kurziv", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink", "-", "Smiley"] ]);

Postoji opcija grupiranja gumba u grupe, a to opet zahtijeva datoteku config.js.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.toolbarGroups = [ ( naziv: "dokument", grupe: [ "mode", "dokument", "doctools" ]), ( naziv: "međuspremnik", grupe: [ "međuspremnik " ", "poništi" ]), ( naziv: "uređivanje", grupe: [ "nađi", "odabir", "provjera pravopisa", "uređivanje" ]), ( naziv: "obrasci", grupe: [ "obrasci" ] ), "/", ( naziv: "osnovni stilovi", grupe: [ "osnovni stilovi", "čišćenje" ] ), ( naziv: "odlomak", grupe: [ "popis", "uvlaka", "blokovi", " align ", "bidi", "paragraph" ]), ( naziv: "veze", grupe: [ "veze" ]), ( naziv: "umetnuti", grupe: [ "umetnuti" ]), "/", ( ime : "stilovi", grupe: [ "stilovi" ]), ( ime: "boje", grupe: [ "boje" ]), ( ime: "alati", grupe: [ "alati" ]), ( ime: " ostali", grupe: [ "ostali" ]), ( naziv: "o", grupe: [ "o" ) ]);

Općenito, prikazane su osnovne postavke uređivača teksta, jedna stvar koja mi se nije svidjela je veličina ovog editora, nakon preuzimanja teži 4m 265kb, što je malo previše. Ako vam i to smeta, onda možete obrisati direktorij uzoraka i također očistiti direktorij s jezicima, jer on teži najviše. U njemu ima puno jezika koji se ne koriste, pa ih možete jednostavno ukloniti i ostaviti samo one koji su potrebni, na primjer, ruski i engleski.

Idemo u direktorij libs/ckeditor/lang i ovdje brišemo sve datoteke osim jezika koji vam je potreban, na primjer, ostavite: ru.js i en.js. Nakon svih obavljenih manipulacija, veličina će se prepoloviti, a direktorij ckeditor izgledat će ovako:

To je sve za mene, svatko tko zna druge suptilnosti ovog urednika, napišite u komentarima.

CKEditor je vizualni uređivač koji možete dodati na svoju web stranicu, blog ili forum potpuno besplatno. Otvorenog je koda i radi na većini popularnih CMS-ova. Čak i neiskusni webmasteri mogu se nositi s instalacijom ovog vizualnog uređivača. U suštini, dodavanje CKEditora na web mjesto odvija se u dva koraka: prvo otpakirate arhivu na poslužitelj, a zatim dodate nekoliko redaka u kod stranice. Detaljne upute za instalaciju pronaći ćete u arhivi s uređivačem.

Izvan kutije, ovo proširenje web-mjesta podržava mogućnost promjene veličine prozora za unos, funkcije kopiranja i lijepljenja teksta, dizajn poveznica, promjenu fontova, rad s gornjim i indeksnim tekstom, dodavanje posebnih znakova, dodavanje izvora informacija, umetanje slika, sidra, itd. Nadalje. Dostupna funkcionalnost ovisi o odabranoj verziji CKEditora. Postoje ih tri: Basic, Standard i Full. Ako vam funkcionalnost "najnaprednijeg" izdanja nije bila dovoljna, možete proširiti mogućnosti uređivača pomoću dodataka.

Programeri nisu zaboravili na mogućnost promjene izgleda CKEditora. Ako nijedna od dvije standardne teme nije po vašem ukusu, onda možete potražiti dodatne "skinove" na službenoj web stranici i specijaliziranim resursima trećih strana. Podsjećamo da su sve navedene funkcionalnosti dostupne webmasterima za “jednokratnu” upotrebu potpuno besplatno. Postoje i verzije vizualnog uređivača s komercijalnim licencama.

Ključne značajke i funkcije
  • distribuira se u tri verzije, koje se razlikuju po funkcionalnosti;
  • može se "proširiti" dodacima;
  • vrlo jednostavan za instalaciju i radi na većini popularnih CMS-a;
  • podržava promjenu tema alatne trake;
  • je potpuno besplatan.
Što je novo u ovoj verziji?

4.6.1 (08.12.2016)

  • parametar "callback" u CKEDITOR.ajax.post sada nije obavezan;
  • Riješeni su problemi s odabirom cijelog sadržaja uređivača ako je projekt započeo ili završio s widgetom ili drugim elementom koji se ne može odabrati. Isti problemi uočeni su pri radu s dodatkom "Odaberi sve";
  • Popravljeno zamrzavanje preglednika pri pokušaju umetanja tablice u popis kojem nedostaje zadnji element;
  • poboljšani dodatak dizajniran za normalizaciju svojstava CSS pozadine;
  • ostali popravci i poboljšanja.