Configurarea CKEdit sau cum să eliminați pictogramele inutile de pe panou. Instalarea editorului vizual CKEditor Caracteristici și funcții cheie

CKEditor 4 - Editor de articole WYSIWYG. Vă permite să efectuați formatare flexibilă a textului, inclusiv lucrul cu stiluri, liste, legături, grafice etc.

Interfață

Figura 1. Fereastra Editor

Fereastra editorului WYSIWYG conține următoarele panouri de butoane:

	Schimbarea modului de vizualizare
	Imprimarea și alegerea unui șablon de articol
	Lucrul cu clipboard (tăiați, copiați, lipiți, anulați)
	Căutați și înlocuiți
	Crearea formularelor
	Inserarea de spoilere (text pliabil) și întreruperi de pagină
	Schimbarea stilului textului
	Formatarea paragrafelor
	Inserarea link-urilor
	Inserarea de conținut media de pe site-uri terțe
	Inserarea obiectelor
	Selectarea unui stil de formatare
	Selectați formatarea paragrafelor
	Selectarea fontului
	Selectarea dimensiunii fontului
	Selectarea textului sau a culorii de fundal
	Verificarea ortografică
	Opțiuni suplimentare de vizualizare (afișați blocurile și extindeți)

Panoul de jos al ferestrei editorului conține informații despre eticheta curentă și statisticile de text:

Schimbarea modului de vizualizare

Panoul pentru comutarea modurilor de vizualizare a editorului conține următoarele butoane:

Imprimarea și alegerea unui șablon de articol

Panoul de selecție a șablonului de imprimare și articol conține următoarele butoane:

Imprimarea articolului pe o imprimantă. După ce faceți clic pe acest buton, se va deschide o casetă de dialog standard care vă va cere să selectați o imprimantă și să tipăriți textul articolului.

Selectarea unui șablon de articol: Imagine și titlu – șablon de articol care conține titlu, imagine și text Șablon ciudat – un șablon de articol al cărui text este împărțit în două coloane Text și tabel – un șablon de articol care conține un titlu, un tabel și un text Un șablon este un cod de markup HTML predefinit pentru un articol viitor. Descrierea șabloanelor este conținută în fișierul „plugins/templates/templates/default.js”. Puteți adăuga șabloane personalizate la acest fișier sau puteți crea un fișier separat cu șabloane și puteți configura CKEditor să funcționeze cu el.

Lucrul cu clipboard-ul

Următoarele operațiuni pentru lucrul cu clipboard sunt disponibile în editor:

	Butonul „Tăiați”. Decupează porțiunea selectată a articolului și o plasează în clipboard.
	butonul Copiere. Copiază fragmentul selectat al articolului și îl plasează în clipboard.
	Butonul „Inserare”. Lipește conținutul clipboard-ului în articol. Dacă textul este lipit din aplicații externe, cum ar fi MS Office, toate etichetele legate de formatare vor fi incluse la lipire. Majoritatea acestor etichete sunt inutile și ar trebui eliminate, ceea ce face dificilă editarea articolului. Prin urmare, se recomandă utilizarea acestui buton doar pentru inserarea de texte neformatate.
	Butonul „Inserați doar text”. Similar cu butonul „Inserare”. Când lipiți un fragment dintr-un articol din clipboard, formatarea acestuia este complet eliminată.
	Butonul „Inserați din Word”. Similar cu butonul „Inserare”. Folosit dacă doriți să păstrați formatarea fragmentului inserat. Lipirea păstrează în mod optim aspectul textului și elimină formatarea inutilă. Recomandat pentru utilizare la copierea textului din MS Word sau din alte aplicații MS Office.
	butonul Anulare. Folosit pentru a anula ultima modificare făcută.
	Butonul „Repetare”. Folosit pentru a anula ultima modificare anulată.

Căutați și înlocuiți

Panoul Găsiți și înlocuiți conține următoarele butoane:

Căutare

Când faceți clic pe butonul „Găsiți”, se deschide o fereastră de căutare:

În câmpul „Găsiți”, introduceți fragmentul de text dorit.

Sunt disponibile următoarele opțiuni:

• Pe tot parcursul textului. Dacă opțiunea este activată, atunci când se ajunge la sfârșitul articolului, căutarea va continua de la început. Dacă opțiunea este dezactivată, căutarea se va încheia când se ajunge la sfârșitul articolului.

Pentru a efectua o căutare, trebuie să introduceți fragmentul pe care îl căutați, să activați opțiunile de căutare necesare și să faceți clic pe butonul „Găsiți”. Editorul va efectua o căutare și va evidenția primul fragment găsit în textul articolului. De fiecare dată când faceți clic din nou pe butonul „Găsiți”, editorul va căuta mai departe prin text și va evidenția următorul fragment găsit.

Înlocuire

Când faceți clic pe butonul „Înlocuire”, se deschide o fereastră de înlocuire a fragmentului de text:

În câmpul „Găsiți”, introduceți fragmentul de text dorit. În câmpul „Înlocuiți cu” textul cu care doriți să înlocuiți fragmentul căutat.

Sunt disponibile următoarele opțiuni:

• Caz sensibil. Dacă opțiunea este activată, căutarea va ține cont de cazul caracterelor fragmentului căutat.
• Doar tot cuvântul. Dacă opțiunea este activată, editorul va căuta fragmentul introdus ca un cuvânt întreg. Rezultatele căutării nu vor include cuvinte pentru care fragmentul introdus face parte.
• Pe tot parcursul textului. Dacă opțiunea este activată, atunci când se ajunge la sfârșitul articolului, căutarea va continua de la început. Dacă opțiunea este dezactivată, căutarea se va încheia când se ajunge la sfârșitul articolului.

Pentru a efectua o înlocuire, trebuie să completați câmpurile „Găsiți” și „Înlocuiți cu”, să activați opțiunile de căutare necesare și să faceți clic pe butonul „Înlocuiți” sau „Înlocuiți tot”. Când faceți clic pe butonul „Înlocuire”, editorul va căuta și înlocui primul fragment găsit în textul articolului. De fiecare dată când faceți clic din nou pe butonul „Înlocuire”, editorul va căuta mai departe prin text și va înlocui următorul fragment găsit.
Când faceți clic pe butonul „Înlocuiește tot”, editorul va căuta și înlocui imediat fragmentul necesar în întregul text al articolului.

Crearea formularelor

Formularele sunt concepute pentru ca utilizatorul să introducă date într-o fereastră de browser, să le transfere procesorului și, dacă este necesar, să afișeze rezultatele procesării. De exemplu: formular de înregistrare a utilizatorului, formular de feedback etc.

Panoul de creare a formularelor conține următoarele butoane:

	Butonul „Formular”. Folosit pentru a insera un formular într-un articol. În codul HTML, formularul corespunde etichetei formularului.
	Butonul „căsuță de selectare”. Folosit pentru a insera casete de selectare (casete de selectare, semne de selectare) într-un formular sau articol.
	Buton radio. Folosit pentru a introduce butoane radio (comutatoare) într-un formular sau articol.
	Butonul câmpului de text. Folosit pentru a insera un câmp de introducere a textului de un rând.
	Butonul câmpului text cu mai multe linii. Folosit pentru a insera un câmp de introducere a textului cu mai multe linii.
	Butonul „Lista derulantă”. Folosit pentru a insera o listă derulantă.
	Butonul „Buton”. Folosit pentru a insera un buton într-un formular sau articol.
	„Butonul pentru imagine”. Folosit pentru a insera o imagine pentru a fi folosită ca buton.
	Butonul „Câmp ascuns”. Folosit pentru a insera un câmp ascuns într-un formular sau articol.

Formă

Când faceți clic pe butonul „Formular”, se deschide fereastra de setări pentru noul formular.

Fereastra de setări formular conține următoarele câmpuri:

Nume	Nume de formă arbitrară. În codul HTML – parametrul nume.
Acţiune	URL-ul către programul sau documentul care prelucrează datele introduse în formular. În codul HTML – parametrul de acțiune.
Identificator	Identificatorul unic al formularului. În codul HTML – parametrul id.
Codificare	Selectarea modului de codificare a datelor din formular. În codul HTML – parametrul enctype. Valori disponibile: text/securitate – spațiile sunt înlocuite cu semnul „+”, literele și alte simboluri nu sunt codificate; multipart/form-data – datele nu sunt codificate. Folosit la trimiterea de fișiere printr-un formular; application/x-www-form-urlencoded – spațiile sunt înlocuite cu semnul „+”, alte caractere decât aspectul latin (litere ale alfabetului rus etc.) sunt codificate cu valorile lor hexazecimale.
Ţintă	Selectarea unei ferestre sau a unui cadru în care procesorul de date de formular va afișa rezultatele procesării. În codul HTML – parametrul țintă. Valori disponibile: Fereastra nouă (_blank) – afișează rezultatele într-o nouă fereastră de browser; Fereastra principală (_top) – ignoră cadrele și afișează rezultatele într-o fereastră completă a browserului. Dacă nu există cadre, atunci funcționează similar cu _self (vezi mai jos); Fereastra curentă (_self) – afișează rezultatele în fereastra curentă; Fereastra părinte (_parent) – afișează rezultatele în cadrul părinte. Dacă nu există cadre, atunci _self funcționează în mod similar.
Metodă	Selectarea metodei de solicitare HTTP de utilizat. În codul HTML – parametrul metodei. Valori disponibile: GET – URL-ul handler-ului apelat este folosit pentru a transfera date. Datele transmise sunt afișate în bara de adrese a browserului. Cantitatea de date transferate este limitată de lungimea maximă admisă a barei de adrese ale browserului; POST – corpul unei cereri de browser web către server este folosit pentru a transfera date. Datele transmise nu sunt afișate în browser. Volumul datelor transmise nu este limitat. Metoda vă permite să transferați fișiere.

Caseta de selectare

O casetă de selectare este concepută pentru a afișa controale care activează sau dezactivează o proprietate sau o opțiune. Un astfel de element poate lua una din două valori: da sau nu. În codul HTML, acest element corespunde etichetei input type="checkbox". Când faceți clic pe butonul „Checkbox”, se deschide fereastra de setări pentru noul element.

Fereastra de setări pentru elementul „Checkbox” conține următoarele câmpuri:

• Nume - numele arbitrar al elementului. În codul HTML – parametrul nume;
• Valoare - acționează ca un identificator unic pentru element. În codul HTML – parametrul valoare;
• Selectat - dacă opțiunea este activată, atunci în mod implicit acest element va fi marcat.

Buton radio

Elementul „Buton radio” este conceput pentru a afișa un grup de valori cu posibilitatea de a selecta doar una dintre ele. Aceste. elementele din cadrul unui grup se exclud reciproc. Fiecare element poate lua una din două valori: da sau nu. În codul HTML, acest element corespunde etichetei input type="radio". Când faceți clic pe butonul „Buton radio”, se deschide fereastra de setări pentru noul element.

Fereastra de setări pentru elementul „Buton radio” conține următoarele câmpuri:

• Elementele dintr-un grup trebuie să aibă același nume.
• Valoare - acţionează ca un identificator unic pentru element. În codul HTML – parametrul valoare.
• Selectat - dacă opțiunea este activată, atunci în mod implicit acest element va fi marcat. În cadrul unui grup, această proprietate ar trebui să fie activată pentru un singur element. Dacă este activat pentru mai multe elemente, atunci va fi marcat doar ultimul.

Câmp text

Elementul „Câmp de text” este destinat utilizatorului să introducă un șir de text. În codul HTML, acest element corespunde etichetei input type="text". Când faceți clic pe butonul „Câmp text”, se deschide fereastra de setări pentru noul câmp.

• Nume - numele arbitrar al elementului. În codul HTML – parametrul nume.
• Valoare - Conține textul care va fi afișat în câmpul de text implicit. În codul HTML – parametrul valoare.
• Lățimea câmpului (în caractere) - lungimea zonei de introducere a câmpului de text în caractere. În codul HTML – parametrul dimensiune.
• Max. număr de caractere - lungimea maximă a șirului care poate fi introdusă în câmpul de text, în caractere. În codul HTML – parametrul maxlength.
• Tip de conținut - Tipul de conținut al câmpului de text. În codul HTML – parametrul tip. Înainte de a trimite date către server, acestea sunt verificate pentru a se asigura că se potrivesc cu tipul specificat.

Tipuri de conținut disponibile:

• Email – câmpul text conține adresa de e-mail;
• Parolă – câmpul de text conține parola;
• Căutare – câmpul de text este destinat introducerii textului căutat;
• Număr de telefon – câmpul de text conține un număr de telefon;
• Text – câmpul de text conține o linie obișnuită;
• Link – caseta de text conține adresa URL.

Câmp text cu mai multe linii

Elementul „Câmp de text cu mai multe linii” este destinat introducerii de către utilizator a textului format din mai multe linii. În codul HTML, acest element corespunde unei etichete textarea asociate. Când faceți clic pe butonul „Câmp text multilinie”, se deschide fereastra de setări pentru noul câmp.

Fereastra de setări pentru elementul „Câmp text” conține următoarele câmpuri:

• Nume - numele arbitrar al elementului. În codul HTML – parametrul nume.
• Coloane - lățimea câmpului în caractere. În codul HTML – parametrul cols.
• Rânduri - înălțimea câmpului în rânduri. În codul HTML – parametrul rânduri.
• Valoare - Conține textul care va fi afișat în câmpul de text implicit.

Lista drop-down

Elementul Listă derulantă este conceput pentru a afișa o listă cu opțiuni multiple sau o listă derulantă. În codul HTML, acest element corespunde unei etichete de selectare asociate. Elementele listei sunt asociate cu o etichetă de opțiune asociată. Când faceți clic pe butonul „Lista derulantă”, se deschide fereastra de setări pentru noua listă.

Fereastra de setări a listei de selecție multiplă conține următoarele câmpuri:

• Nume - numele arbitrar al elementului. În codul HTML – parametrul nume.
• Valoare - conține valoarea elementului din listă care este selectat implicit. În codul HTML pentru acest element, eticheta de opțiune este setată la selected="selected" .
• Dimensiune - înălțimea zonei listei afișate în linii. Dacă dimensiunea este egală cu unu, atunci va fi afișată o listă derulantă. Dacă dimensiunea nu este specificată, vizualizarea listă va depinde de opțiunea Permite selecții multiple.

Grup de parametri „Opțiuni disponibile”:

• Text - câmp de introducere pentru textul afișat al articolului din listă. Introdus împreună cu câmpul „Valoare”. Pentru a adăuga o pereche „Text – Valoare” la listă, faceți clic pe butonul „Adăugați”.
• Valoare - câmp de introducere pentru valoarea elementului din listă trimis către server. Introdus împreună cu câmpul „text”. Pentru a adăuga o pereche „Text – Valoare” la listă, faceți clic pe butonul „Adăugați”.
• Buton Add - pentru a adăuga perechea „Text – Valoare” introdusă la listă.
• Editare - buton pentru a schimba elementul din listă selectat. Pentru a schimba, trebuie să selectați elementul necesar din setările listei, să editați conținutul câmpurilor „Text” și „Valoare” și să faceți clic pe butonul „Schimbare”. Elementul selectat va fi actualizat în consecință.
• Ridicare - buton pentru a muta elementul din listă selectat cu un nivel mai sus.
• Lower - buton pentru a muta elementul din listă selectat cu un nivel mai jos.
• Marcați ca selectat - când faceți clic pe butonul, elementul din listă selectat devine marcat ca selectat în mod implicit. Valoarea elementului este afișată în câmpul „Valoare” (vezi mai sus). În codul HTML pentru acest element, eticheta de opțiune este setată la selected="selected" .
• Ștergere - buton pentru a șterge elementul selectat din listă.
• Permite selecție multiplă - dacă proprietatea este activată, atunci folosind tasta ctrl puteți selecta mai multe elemente din listă. Dacă dimensiunea listei nu este specificată și proprietatea este dezactivată, va fi afișată o listă derulantă. Dacă dimensiunea listei nu este specificată și proprietatea este activată, atunci dimensiunea listei este setată la patru.

Urmează finalul articolului...

După părerea mea, CKEditor este unul dintre cei mai buni editori wysiwyg pentru site-uri web. În ultimul timp, au apărut o mulțime de prostii pentru a simplifica viața utilizatorului, ceea ce în cele din urmă îl interferează ca ACF. Știu deja cum să-l editez și să îl dezactivez. Dar să revenim la subiectul articolului nostru: cum să instalați pluginuri pe CKEditor.

Văd două abordări aici.

În primul rând, mergem la site-ul web al editorului și reconstruim CKeditor pentru noi înșine, inclusiv pluginurile de care avem nevoie. Acest lucru se face după cum urmează. Accesați site-ul web ckeditor.com, accesați fila de descărcare. Apoi, selectați Sau permiteți-mi să personalizez CKEditor

Dar, în acest caz, nu toate pluginurile sunt afișate. Pentru a include orice pluginuri noi sau speciale în versiunea dvs., trebuie să vă construiți versiunea puțin diferit. Accesați Add-ons -> Plug-in-uri și vedeți următorul meniu mobil din dreapta

Când faceți clic pe butonul adăugare la editorul meu, pluginul este adăugat la asamblare. Când ați terminat, faceți clic pe Creați editorul meu și înlocuiți editorul nostru încorporat cu cel generat.

A doua abordare este pentru cei care sunt interesați să aprofundeze înșiși codul.

Pe site-ul web ckeditor.com, accesați secțiunea add-ons->plug-in-uri și faceți clic pe pluginul necesar.

Selectați Descărcare și urmați instrucțiunile de pe site. În cea mai mare parte, fie se rezumă la faptul că trebuie să instalați dependențe pentru un anumit plugin și să înregistrați atât pluginul în sine în câmpul fișierului de configurare config.js, cât și pluginul de care depinde cel instalat, separate prin virgule. , de exemplu,

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

V-am împărtășit un editor WISIWIG excelent, care este excelent pentru utilizare pe majoritatea site-urilor. Acest instrument facilitează, fără îndoială, tastarea și editarea textului pentru persoanele care nu cunosc HTML.

Personal, mi-a fost destul de greu să găsesc informații despre configurarea acestui editor WISIWIG pe internetul rusesc, așa că a trebuit să citesc documentația în limba engleză. Apropo, acest fapt m-a determinat să scriu această notă.

Secretul întregului truc este că aproape toate setările sunt concentrate în fișier /ckeditor/config.js. Neașteptat de adevărat. Dacă, ca mine, utilizați Textpattern ca CMS, atunci calea către fișier va fi ușor diferită - /textpattern/ckeditor/config.js.
Implicit (fără setări) fișierul arată astfel:

CKEDITOR.editorConfig = function(config) ();

Pentru a configura afișarea pictogramelor pe panou, trebuie să adăugați parametrul config.toolbar_Full. Pentru a afișa toate pictogramele posibile pe care acest sistem le oferă pe panou, adăugați codul:

CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( nume: "document", articole: [ "Sursa","-","Salvare","NewPage","DocProps","Preview","Print ","-","Șabloane" ] ), (nume: "clipboard", articole: [ "Tăiați","Copiați","Lipiți","LipițiText","Inserați din Cuvânt","-","Anulați", „Reface” ] ), (nume: „editare”, articole: [ „Find”, „Înlocuiți”, „-”, „SelectAll”, „-”, „SpellChecker”, „Scayt” ] ), (nume: „ formulare", articole: [ "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" ]), "/", ( nume : „stiluri de bază”, articole: [ „Aldin”, „Italic”, „Subliniat”, „Strike”, „Subscript”, „Superscript”, „-”, „Eliminare format” ] ), ( nume: „paragraf”, articole : [ "NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight", "JustifyBlock","-","BidiLtr","BidiRtl" ] ), ( nume: "linkuri", articole: [ "Link","Unlink","Anchor" ] ), ( nume: "inserat", articole : [ "Imagine","Flash","Tabel","HorizontalRule","Smiley","SpecialChar","PageBreak" ] ), "/", ( nume: "stiluri", articole: [ "Stiluri", „Format”, „Font”, „FontSize” ] ), (nume: „culori”, articole: [ „TextColor","BGColor” ] ), (nume: „instrumente”, articole: [ „Maximizați”, „Afișați blocuri” ","-","Despre" ] ) ]; );

Pentru a elimina pictogramele inutile, trebuie să eliminați manual denumirea acestora ("Maximize", "ShowBlocks", etc.) din acest cod. În consecință, menținerea sintaxei corecte. Cred că nu este nimic complicat aici.

Cum o fac?

De obicei, pentru un site client folosesc această vizualizare:

Elimin intenționat instrumentele de formatare a textului care modifică aspectul textului pe site, cum ar fi culoarea fontului, fontul și dimensiunea, deoarece cred că acest lucru ar trebui făcut de un dezvoltator web, și nu de persoana care umple site-ul. În plus, majoritatea oamenilor care lucrează ulterior cu acest site au cel mai adesea „gust ciudat”, care poate strica aspectul general al site-ului.

De exemplu, acest tip de interfață poate fi configurat cu următorul cod:

CKEDITOR.editorConfig = function(config) ( config.toolbar_Full = [ ( nume: „document”, elemente: [ „Anulare”, „Refacere”] ), (nume: „stiluri de bază”, articole: [ „Aldin”, „Italic” ","Subliniere","Subscript","Superscript","Format" ] ), (nume: "paragraf", articole: [ "NumberedList","BulletedList","-","JustifyLeft","JustifyCenter", "JustifyRight","JustifyBlock" ] ), ( nume: "linkuri", articole: [ "Link","Unlink" ] ), ( nume: "insert", articole: [ "Image","Table","SpecialChar" " ]), ( nume: "instrumente", articole: [ "Maximiza", "Sursa"] ) ]; );

Repet încă o dată dacă spun că astăzi CKE dit este cel mai bun sistem pe care l-am văzut vreodată.

Distribuie pe rețelele sociale retelelor

Opțiuni de descărcare

Există mai multe opțiuni pentru a descărca versiunile CKEditor 5:

După descărcarea editorului, accesați ghidul API de bază pentru a vedea cum să creați editori.

CDN

Compilările pot fi încărcate în pagini direct din , care este optimizat pentru livrarea de conținut super rapidă la nivel mondial. Când utilizați CDN, nu este necesară descărcarea.

npm

Toate versiunile sunt lansate pe npm. Utilizați acest link de căutare pentru a vedea toate pachetele de build oficiale disponibile în npm.

Instalarea unei build cu npm este la fel de simplă ca apelarea uneia dintre următoarele comenzi din proiectul dvs.:

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

CKEditor va fi apoi disponibil la node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js . De asemenea, poate fi importat direct în codul dvs. prin require("@ckeditor/ckeditor5-build-") .

Descărcare zip

Accesați și descărcați versiunea preferată. De exemplu, puteți descărca fișierul ckeditor5-build-classic-1.0.0.zip pentru versiunea editorului clasic.

Extrageți fișierul .zip într-un director dedicat din interiorul proiectului. Este recomandat să includeți versiunea editorului în numele directorului pentru a asigura invalidarea corectă a memoriei cache odată ce este instalată o nouă versiune de CKEditor.

Fișiere incluse

• ckeditor.js – Pachetul de editor gata de utilizat, care conține editorul și toate pluginurile.
• ckeditor.js.map – Harta sursă pentru pachetul de editor.
• traduceri/ – Editorul de traduceri UI (consultați Setarea limbii UI).
• README.md și LICENSE.md

Se încarcă API-ul

După descărcarea și instalarea unei versiuni CKEditor 5 în aplicația dvs., este timpul să faceți API-ul editorului disponibil în paginile dvs. În acest scop, este suficient să încărcați scriptul punctului de intrare API:

Odată ce scriptul CKEditor este încărcat, puteți

Astăzi ne vom da seama cum să integrăm și să configuram foarte popularul editor de conținut CKEditor într-o aplicație standard ASP.NET MVC. De asemenea, vom instala și configura managerul de fișiere la fel de popular CKFinder.

Pagina oficială a dezvoltatorului: https://ckeditor.com/

CKEditor este un editor de conținut HTML WYSIWYG vizual foarte popular astăzi.

CKFinder este un manager de fișiere care vă permite să accesați sistemul de fișiere de pe server și să gestionați fișierele din browserul clientului.

De obicei, ambele componente vin împreună, adică managerul de fișiere este integrat în editor.

CKEditor este disponibil în două versiuni. Versiunea 4 este mai veche și, prin urmare, mai răspândită. Și versiunea 5, nouă, implementând o arhitectură modulară, cu multe inovații.

Configurarea CKEditor

Folosesc versiunea 4 în proiectele mele, funcționalitatea ei este suficientă pentru a rezolva orice problemă. Să descarcăm arhiva cu editorul și să o adăugăm la proiectul nostru.

Adăugarea CKEditor este foarte simplă. Acest lucru se întâmplă în mai multe etape:

conectăm biblioteca JS la pagină printr-o etichetă;

definim o etichetă HTML care va fi folosită ca container pentru CKEditor;

utilizați metoda CKEDITOR.replace();

pentru a conecta editorul la un .

) document.addEventListener("DOMContentLoaded", function (eveniment) ( var editor = CKEDITOR.replace("content1"); ));

Totul este gata! În exemplul de mai sus, CKEditor se conectează la zona de text „conținut1” din interiorul unui formular HTML. În continuare, conținutul acestui câmp va fi trimis către server.

Este demn de remarcat faptul că există multe plugin-uri pentru CKEditor care își extind funcționalitatea standard. De asemenea, puteți scrie plugin-uri (acest proces este descris mai detaliat în documentația oficială de pe site). Să adăugăm un plugin la editor care vă permite să încorporați videoclipuri de la găzduirea video Youtube în pagină.

La momentul scrierii, toate pluginurile pot fi găsite într-o secțiune separată de pe site. Pluginul de care suntem interesați se află la: https://ckeditor.com/cke4/addon/youtube

După aceasta, pe bara de instrumente a editorului va apărea un nou buton care vă permite să lucrați cu noul plugin.

Configurarea CKFinder

Acum să ne uităm la managerul de fișiere CKFinder. Deoarece fișierele noastre (de exemplu, imaginile) se află pe server, pe lângă conectarea acestei componente la client, adică în browserul utilizatorului, va trebui să o configuram și pe partea serverului și să conectăm în mod specific unele biblioteci. și implementați mai multe metode.

Documentația oficială pentru configurarea unui conector pentru aplicațiile ASP.NET se află la: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

CKSource.CKFinder - Client JavaScript, se conectează pe partea clientului

CKSource.CKFinder.Connector.Core - biblioteca principală și de chei care asigură că conectorul CKFinder funcționează pe server

CKSource.CKFinder.Connector.Config - Această bibliotecă vă permite să configurați CKFinder prin intermediul . Observați cum se modifică fișierul de configurare după instalarea acestui pachet, acum toate setările pentru CKFinder sunt acolo.

CKSource.CKFinder.Connector.Host.Owin - această bibliotecă vă permite să conectați un conector ca componentă OWIN într-o aplicație. Pe partea de server, CKFinder funcționează exact conform acestei specificații, adică. Deschideți interfața web pentru .NET

Microsoft.Owin.Host.SystemWeb - instalați imediat gazda sau serverul OWIN

CKSource.FileSystem.Local - această componentă adaugă suport pentru lucrul cu sistemul de fișiere de pe server

După instalarea tuturor componentelor necesare, puteți începe configurarea părții server.

În primul rând, CKFinder cere ca numai utilizatorii autentificați să aibă acces la sistemul de fișiere, adică de fiecare dată când facem o solicitare către server prin acest manager de fișiere, trebuie să îi spunem dacă utilizatorului dat îi este permis să acceseze fișierele de pe server sau nu. .

Pentru a face acest lucru, trebuie să implementăm o interfață specială și în ea o metodă care autentifică toate cererile primite.

CKFinderAuthenticator.cs

Clasa publică CKFinderAuthenticator: IAuthenticator ( sarcină publică AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) (var user = utilizator nou (adevărat, listă nouă()); returnează Task.FromResult((IUser) utilizator); ) )

În exemplul de mai sus, pur și simplu returnăm un utilizator fals de fiecare dată care este întotdeauna autentificat (steagul adevărat) și nu are roluri (foaia goală). Adică avem întotdeauna drepturi de acces la sistemul de fișiere. Într-un proiect real, desigur, această problemă trebuie abordată mai serios și această metodă trebuie combinată cu sistemul existent de autentificare și autorizare a utilizatorilor.

Namespace CKEditor ( public class Startup ( public void Configuration(IAppBuilder app) ( // înregistrează sistemul de fișiere pentru conectorul FileSystemFactory.RegisterFileSystem(); // declară o rută în aplicație și mapează-o la conector // clientul CKFinder JS biblioteca se așteaptă să vadă conectorul de-a lungul acestei rute app.Map("/ckfinder/connector", SetupConnector ) //declară o metodă de configurare și inițializare a conectorului privat static void SetupConnector(aplicația IAppBuilder) ( //creează instanțe ale necesarului clase var connectorFactory = new OwinConnectorFactory(); var connectorBuilder = new ConnectorBuilder(); var customAuthenticator = new CKFinderAuthenticator(); definit anterior authenticator.SetRequestConfiguration((request, config) => ( config.LoadConfig(); )); //definiți configurația pentru fiecare cerere individuală //creați o instanță a conectorului var connector = connectorBuilder.Build(connectorFactory);

//adăugați un conector la aplicația pipeline.UseConnector(connector);

) ) )

Aceasta completează configurarea părții server. Acum integrăm clientul CKFinder cu CKEditor pe pagină.

@using (Html.BeginForm ("Index", "Acasă", FormMethod.Post)) ( ) document.addEventListener ("DOMContentLoaded", funcția (eveniment) ( var editor = CKEDITOR.replace ("conținut1"); CKFinder.setupCKEditor (editor));

Dacă toate scripturile sunt conectate corect și conectorul este configurat pe partea serverului, atunci vom accesa sistemul de fișiere prin CKFinder din browserul utilizatorului.