Manuprāt, CKEditor ir viens no labākajiem vietņu wysiwyg redaktoriem. Nesen tajā ir parādījies daudz mēmu, lai vienkāršotu lietotāja dzīvi, kas galu galā traucē, piemēram, ACF. Es jau zinu, kā to rediģēt un atspējot. Bet atgriezīsimies pie mūsu raksta tēmas: kā instalēt spraudņus CKEditor.

Es šeit redzu divas pieejas.

Pirmkārt, mēs ejam uz redaktora vietni un pārbūvējam CKeditor sev, ieskaitot mums nepieciešamos spraudņus. Tas tiek darīts šādi. Mēs ejam uz vietni ckeditor.com, dodieties uz lejupielādes cilni. Pēc tam atlasiet Vai ļaujiet man pielāgot CKEditor

Bet šajā gadījumā netiek parādīti visi spraudņi. Lai savā būvniecībā iekļautu jaunus vai īpašus spraudņus, būvējums ir jāveido nedaudz savādāk. Dodieties uz Papildinājumi -> Spraudņi un skatiet tālāk redzamo kustīgo izvēlni labajā pusē

Noklikšķinot uz pogas Pievienot manam redaktoram, spraudnis tiek pievienots montāžai. Kad esat pabeidzis, noklikšķiniet uz Izveidot manu redaktoru un aizstājiet mūsu iebūvēto redaktoru ar ģenerēto.

Otrā pieeja ir paredzēta tiem, kas vēlas pašiem iedziļināties kodā.

Vietnē ckeditor.com dodieties uz sadaļu add-ons->plug-ins un noklikšķiniet uz vajadzīgā spraudņa.

Atlasiet Lejupielādēt un izpildiet vietnē sniegtos norādījumus. Lielākoties tie ir saistīti ar faktu, ka jums ir jāinstalē atkarības konkrētajam spraudnim un jāreģistrē pats spraudnis laukā konfigurācijas fails config.js un spraudni, no kura ir atkarīgs instalētājs, atdalot ar komatiem, piemēram,

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

CKEditor ir lietošanai gatavs HTML teksta redaktors, kas paredzēts tīmekļa lapas satura izveides vienkāršošanai. Šis ir WYSIWYG redaktors, kas nodrošina teksta rediģēšanas funkcijas tieši jūsu tīmekļa lapās.

CKEditor ir atvērtā pirmkoda lietojumprogramma avota kods, tas ir, to var mainīt pēc jūsu pieprasījuma. Tās lietderību nodrošina aktīva kopiena, kas nekad nebeidz izstrādāt lietojumprogrammas ar bezmaksas papildinājumiem un pārredzamu izstrādes procesu.

3-Lejupielādējiet CKEditor

CKEditor lejupielādei ir 4 iespējas.

Lejupielādes rezultāts:

Mapē varat redzēt CKEditor piemērus paraugi:

4- Pamatpiemēri:

Visi šī raksta piemēri ir ietverti mapē paraugi CKEditor, kuru lejupielādējāt. Bet es centīšos to padarīt vieglāku, lai jums būtu vieglāk.

Izveidojiet mapi mani piemēri, šajā rakstā minētie piemēri atradīsies šajā mapē.

4.1. Aizstāt Textarea elementus, izmantojot JavaScript

Vienkāršs piemērs ir izmantot CKEditor.replace(..), lai aizstātu, izmantojot CKEditor .

aizstāt ar kodu.html

Aizstāt Textarea ar kodu Aizstāt Textarea elementus, izmantojot JavaScript kodu

Labdien, CKEditor

CKEDITOR.replace("editor1");

Skatīt piemēru:

Piemēra izpildes rezultāti:

4.2- Aizstāt teksta apgabala elementus ar nosaukuma klasi

Ar atribūtu vārds, un klase = "ckeditor" tiks automātiski aizstāta ar CKEditor.

Teksts

aizstāt ar klasi.html

Aizstāt teksta apgabalus ar klases nosaukumu Aizstāt teksta apgabala elementus ar klases nosaukumu

Labdien, CKEditor

Piemēra izpilde:

4.3- Izveidojiet CKEditor ar jQuery

Piemērs CKEditor izveidei, izmantojot JQuery.

jQuery Adapter — CKEditor paraugs $(document).ready(function() ( $("#editor1").ckeditor(; )); funkcija setValue() ( $("#editor1").val($("input#val").val()); ) Izveidojiet redaktorus, izmantojot jQuery

Labdien, CKEditor

Kā redzat, konfigurācijas nosaka vienkāršs JavaScript objekts, kas tiek nodots metodei create().

Funkcijas noņemšana

Builds ir aprīkots ar visām izplatīšanas pakotnē iekļautajām funkcijām, kas ir iespējotas pēc noklusējuma. Tie ir definēti kā CKEditor spraudņi.

Dažos gadījumos lietojumprogrammā var būt nepieciešami dažādi redaktora iestatījumi, kuru pamatā ir viena un tā pati versija. Šim nolūkam tev vajag lai kontrolētu izpildlaikā redaktorā pieejamos spraudņus.

Tālāk esošajā piemērā virsrakstu un saišu spraudņi ir noņemti:

// Noņemiet dažus spraudņus no noklusējuma iestatīšanas. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Virsraksts" , "Saite" ], rīkjosla : [ "treknraksts", "slīpraksts" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( konsole .log(error); ));

Esiet piesardzīgs, noņemot spraudņus no CKEditor būvējumiem, izmantojot config.removePlugins . Ja noņemtie spraudņi nodrošināja rīkjoslas pogas, būvējumā iekļautā noklusējuma rīkjoslas konfigurācija kļūs nederīga. Šādā gadījumā jums ir jānodrošina atjauninātā rīkjoslas konfigurācija, kā parādīts iepriekš minētajā piemērā.

Spraudņu saraksts

Katrai versijai ir pieejami vairāki spraudņi. Varat viegli uzskaitīt visus jūsu būvniecībā pieejamos spraudņus:

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

Sarežģītu funkciju pievienošana

Tā kā CKEditor būvējumos nav iekļauti visi iespējamie līdzekļi, vienīgais veids, kā tiem pievienot papildu līdzekļus, ir izveidot pielāgotu būvējumu.

Vienkāršu (savrupu) funkciju pievienošana

Katram noteikumam ir izņēmums. Lai gan nav iespējams pievienot spraudņus, kuriem ir atkarība no @ckeditor/ckeditor5-core vai @ckeditor/ckeditor5-engine (kas ietver gandrīz visus esošos oficiālos spraudņus), nepārbūvējot būvējumu, tomēr ir iespējams pievienot vienkāršus spraudņus bez atkarības. .

importēt ClassicEditor no "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( redaktors ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = funkcija ( loader ) ( // ... ); ) // Ielādējiet pielāgoto augšupielādes adapteri kā redaktora spraudni. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( konsole .log(error); )); Rīkjoslas iestatīšana

Būvniecībās, kurās ir rīkjoslas, tam ir noteikta optimāla noklusējuma konfigurācija. Tomēr jums var būt nepieciešams cits rīkjoslas izkārtojums, un to var panākt, konfigurējot.

Katram redaktoram var būt atšķirīga rīkjoslas konfigurācijas shēma, tāpēc ieteicams pārbaudīt tās dokumentāciju. Jebkurā gadījumā šāds piemērs var sniegt vispārīgu priekšstatu:

ClassicEditor .create(document .querySelector("#editor" ), ( rīkjosla : [ "treknraksts" , "slīps" , "saite" ] )) .catch(error => ( konsole .log(error); ));

Iepriekš minētā ir stingra ar lietotāja saskarni saistīta konfigurācija. Noņemot rīkjoslas vienumu, līdzeklis netiek noņemts no redaktora iekšējiem elementiem. Ja rīkjoslas konfigurācijas mērķis ir noņemt līdzekļus, pareizais risinājums ir noņemt arī to attiecīgos spraudņus. Lai iegūtu papildinformāciju, pārbaudiet iepriekš.

Pieejamo vienumu saraksts

Varat izmantot šo fragmentu, lai izgūtu visus redaktorā pieejamos rīkjoslas vienumus:

Masīvs .from(editor.ui.componentFactory.names());

Savā mājaslapā izmantoju BUEditor - vienkāršu, ērtu redaktoru, bet lietotājiem tas nav īpaši ērts. Bieži domāju par CKEditor instalēšanu, bet man tas likās kaut kāds briesmonis, bet patiesībā viss izrādījās ne tik biedējoši.

Izlasiet, kā instalēt moduli.

Pēc savienojuma izveides, izmantojot moduli, cilnes lapā admin/config/content/ckeditor/edit/profile_assignment REDAKTORA IZSKATS, Nodaļā Spraudņi Tiks parādīta aktivizēšanas izvēles rūtiņa. Ieslēdziet, saglabājiet, pārbaudiet.

3. Saišu ievietošana. Saites ievietošanas dialoglodziņā ir daudz nevajadzīgu un neskaidru lietu. Mēs to aizstājam ar spraudni Simple link. Kā instalēt, skatiet 2. darbību. Savienojiet (skatiet 1. punktu):

Config.extraPlugins = "SimpleLink";

Parādīsies arī jauna spraudņa ikona (poga).

4. Attēlu ievietošana. Šeit viss ir tāpat kā ar saitēm; varat instalēt spraudni Simple Image, lai ievietotu attēlus, izmantojot saites.

Config.extraPlugins = "Vienkāršs attēls";

Vai augšupielādējiet attēlus, izmantojot viena klikšķa augšupielādes moduli. . Lasīt vairāk. Es izvēlējos otro metodi, lai gan BUEditor izmantoju abus.

Vienīgais, ko es vēlos piebilst, ir tas, ka uzlabotā attēla spraudnim ir nepieciešami vēl divi spraudņi Widget un Lineutils.

Es nevarēju saprast, kāpēc spraudnis nesākas, kamēr nepaskatījos žurnālā

5. Izskats. Pēc noklusējuma tiek izmantota Moono āda, bet es gribēju piešķirt izskatu BUEditor izskatam.

šādi izskatījās BUEditor

7. Vietturis. Lai pievienotu vietturi, instalējiet spraudni (skatiet 2. punktu) Konfigurācijas palīgs. Savienojiet (skatiet 1. punktu):

Config.extraPlugins = "confighelper"; config.placeholder = " Mūsu teksts"; // текст нашего placeholder !}

8. Smaidiņi. Par smaidiem CKEditor atbild spraudnis Insert Smiley; tas ir iekļauts standarta pakotnē - Full Package.

Šādi izskatās smaidiņi ārpus kastes:

Lai tos aizstātu ar savējiem, konfigurācijā jānorāda ceļš uz mapi ar attēliem smiley_path (skatiet 1. darbību):

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

Ievadiet to failu (attēlu) nosaukumus, kuri tiks parādīti smiley_images :

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

Un apraksts (virsot kursoru apraksts) smiley_descriptions

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

Varat arī norādīt, cik kolonnu rādīt smaidiņus sadaļā (noklusējums: 8) smiley_columns

Config.smiley_columns = 6;

Lūk, ko es saņēmu

9. Pārlūkprogrammas pareizrakstības pārbaude. Kā UksusoFF rakstīja CKEditorā, pārlūkprogrammas pareizrakstības pārbaude ir atspējota. Lai atspējotu šo atspējošanu (nedaudz tautoloģijas), konfigurācijā jāieraksta:

Config.disableNativeSpellChecker = false;

10. Konteksta izvēlne. Programmā CKEditor, nospiežot taustiņu RMB, tiek atvērta konteksta izvēlne, nevis vietējā pārlūkprogrammas izvēlne

Lejupielādes iespējas

Ir vairākas iespējas, kā lejupielādēt CKEditor 5 būvējumus:

Pēc redaktora lejupielādes pārejiet uz pamata API ceļvedi, lai redzētu, kā izveidot redaktorus.

CDN

Būvējumus var ielādēt lapās tieši no vietnes, kas ir optimizēta īpaši ātrai satura piegādei visā pasaulē. Izmantojot CDN, lejupielāde faktiski nav nepieciešama.

npm

Visas versijas tiek izlaistas npm. Izmantojiet šo meklēšanas saiti, lai skatītu visas oficiālās versijas pakotnes, kas pieejamas npm.

Būvējuma instalēšana ar npm ir tikpat vienkārša kā vienas no tālāk norādītajām komandām savā projektā:

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

Pēc tam CKEditor būs pieejams vietnē node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js. To var arī importēt tieši savā kodā, izmantojot request("@ckeditor/ckeditor5-build-") .

Zip lejupielāde

Dodieties uz un lejupielādējiet vēlamo būvējumu. Piemēram, varat lejupielādēt klasiskā redaktora versijas failu ckeditor5-build-classic-1.0.0.zip.

Izvelciet .zip failu īpašā direktorijā savā projektā. Ieteicams direktorija nosaukumā iekļaut redaktora versiju, lai nodrošinātu pareizu kešatmiņas nederīgumu, tiklīdz ir instalēta jauna CKEditor versija.

Iekļautie faili

• ckeditor.js — lietošanai gatavs redaktora komplekts, kurā ir redaktors un visi spraudņi.
• ckeditor.js.map — redaktora komplekta avota karte.
• translations/ – redaktora lietotāja interfeisa tulkojumi (skatiet sadaļu UI valodas iestatīšana).
• README.md un LICENSE.md

Notiek API ielāde

Pēc CKEditor 5 versijas lejupielādes un instalēšanas savā lietojumprogrammā ir pienācis laiks padarīt redaktora API pieejamu jūsu lapās. Šim nolūkam pietiek ar API ieejas punkta skripta ielādi:

Kad CKEditor skripts ir ielādēts, varat