Probleme cu editorul ckeditor. Instalarea pluginurilor în CKEditor

De obicei, un editor WYSIWYG este necesar atunci când trebuie să scrieți un panou de administrare în care la utilizatorul mediu pentru cei care nu cunosc html, va fi ușor și convenabil să-și adauge propriile texte. Acesta a fost cazul în cazul meu.

Descărcați CKEditor de pe site-ul oficial: descărcați ckeditor
Descărcați fisier gratuit Manager KCFinder: descărcați kcfinder

Integram CKEditor în site-ul web într-un mod standard. Adăugați scriptul ckeditor.js la pagină (în cazul meu, scriptul se află în rădăcina site-ului în directorul ckeditor). Am despachetat KCFinder în folderul ckeditor, doar pentru comoditate.

Să existe un câmp de zonă de text pe pagină care trebuie înlocuit cu un editor WYSIWYG:

CKEDITOR.replace("ckeditor");

În continuare, trebuie să specificăm setările în ckeditor, astfel încât atunci când faceți clic pe butonul „încărcare fișier” sau vizualizați fișierele pe server, se deschide KCFinder, pentru aceasta îl adăugăm la CKEDITOR.replace următoarele setări:

CKEDITOR.replace("ckeditor",("filebrowserBrowseUrl":"/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":"/ckeditor/kcfinder/browse.php?type=images", "filebrowserFlashBrowseUrl" :"/ckeditor/kcfinder/browse.php?type=flash", "filebrowserUploadUrl":"/ckeditor/kcfinder/upload.php?type=files", "filebrowserImageUploadUrl":"/ckeditor/kcfinder/upload.php?type =imagini", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"));

În directorul /ckeditor/kcfinder/ există un script cu configurația config.php, unde trebuie să specificați calea către folderul în care vor fi încărcate fișierele adăugate (nu uitați să vă asigurați că directorul poate fi scris) .

Se pare că totul funcționează, dar mai sunt câteva puncte referitoare la setările de formatare a codului în CKEditor, de exemplu, nu-mi place că atunci când apăsați tasta Enter în editor, textul este inclus într-o etichetă

Această etichetă este, de asemenea, scrisă în mod constant atunci când încercăm să salvăm un câmp gol cu ​​un editor conectat. Pentru a remedia acest lucru, adăugați un mic script:

If(tip de CKEDITOR !== „nedefinit”) ( CKEDITOR.on(„instanceReady”, function(ev)) ( // Afișează paragrafele ca . ev.editor.dataProcessor.writer.setRules(„*”, ( indent: fals, breakBeforeOpen: adevărat, breakAfterOpen: fals, breakBeforeClose: fals, breakAfterClose: adevărat ));

Eticheta de completare automată a fost eliminată

Acum vom elimina incinta textului din această etichetă când apăsăm enter. Pentru a face acest lucru, adăugați următoarele setări în fișierul de configurare /ckeditor/config.js:

// când apăsați enter, adăugați br config.enterMode = CKEDITOR.ENTER_BR;

config.shiftEnterMode = CKEDITOR.ENTER_BR; Dacă ultimele două linii de cod nu par să ajute la rezolvarea problemei, ștergeți memoria cache a browserului și testați din nou, totul ar trebui să funcționeze. Deci editorul dvs. este CKEditor c manager de fișiere

KCFinder este gata de plecare și nici măcar nu arată rău.

Informații suplimentare despre configurarea configurației pot fi găsite pe site-urile web oficiale ale editorilor. Astăzi ne vom da seama cum să integrăm și să configuram foarte mult editor popular Conținutul CKEditor 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 sistem de fișiere

pe server și 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ă, implementată arhitectura modulara

, 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 .

Este de remarcat faptul că există multe plugin-uri pentru CKEditor care își extind funcționalitatea standard. De asemenea, puteți scrie pluginuri singur (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 pe pagină.

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

După aceasta, va apărea bara de instrumente a editorului buton nou, permițându-vă 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/

Spre deosebire de editorul CKEditor, pe care l-am configurat pe site și l-am descărcat manual, putem adăuga CKFinder la proiect direct în Visual Studio prin . Setul minim de pachete necesare pentru lucru arată astfel:

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

CKSource.CKFinder.Connector.Core - biblioteca principală și de chei care asigură funcționarea conectorului CKFinder 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 componentele 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 cerere către server prin acest manager de fișiere, trebuie să îi spunem dacă acest utilizator accesați 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 ( foaie goală). Adică avem întotdeauna drepturi de acces la sistemul de fișiere. Într-un proiect real, desigur, trebuie să abordați această problemă mai serios și să combinați această metodă cu sistem existent autentificarea și autorizarea utilizatorului.

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 // biblioteca client JS CKFinder 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ă.

În funcție de setările conectorului din fișierul Web.config, putem modifica permisiunile pentru manipularea fișierelor și folderelor (creare, mutare etc.).

Vă rugăm să rețineți că ne-am uitat doar la configurația de bază a CKFinder. În plus, puteți adăuga înregistrarea în jurnal, stocarea în cache a fișierelor, diverse plugin-uri (de exemplu, adăugarea unui filigran la imaginile descărcate) etc. Puteți citi mai multe despre acest lucru în documentația oficială.

Acest articol vă va arăta metoda de instalare editor vizual către site-ul dvs. web. Acest editor este foarte convenabil pentru adăugarea și/sau editarea de informații noi pentru site. De exemplu, instalarea pe forum, într-un bloc cu comentarii, care facilitează și extinde posibilitățile de editare a textului unui nou comentariu, i.e. poți evidenția textul, sublinia, introduce un link și multe altele, totul depinde de cât de mult acces îi oferi cititorului tău. Și, bineînțeles, ceea ce nu trebuie să uităm este despre partea de administrare, care vă poate facilita semnificativ munca atunci când adăugați și editați material.

Am lucrat cu doi editori vizuali: Tinymce și CK Editor, deși acești doi editori sunt destul de populari, voi fi sincer, mi-a plăcut mai mult CK Editor, sau mai bine zis, era mai potrivit pentru sarcinile mele. Prin urmare, aici ne vom uita la cum să instalați Editorul CK și vă voi spune altă dată.

Mai întâi, ca întotdeauna, trebuie să descarcăm editorul, puteți descărca pachetul complet sau puteți selecta toate pachetele necesare pe site-ul oficial.

După ce descărcarea este completă, despachetați arhiva descărcată, de exemplu, în folderul libs situat în rădăcina site-ului. În index.html între etichete conectăm pluginul editor ckeditor.js și bineînțeles biblioteca jquery.

HTML

Și așa, tot ce rămâne este să creăm un formular cu un câmp de testare, cu care editorul nostru va interacționa.

HTML

CKEDITOR.replace("editor1");

În general, totul despre instalare, după încărcarea paginii, ar trebui să apară deja un editor de text în câmpul de text specificat. Acest editor poate fi personalizat după gustul dvs. puteți modifica fundalul cadrului sau limba editorului, puteți seta lățimea și înălțimea ferestrei; Pentru a face acest lucru, utilizați fișierul config.js, care se află în folderul libs/ckeditor/config.js. În acest fișier putem seta setările enumerate mai sus și multe altele. Mai multe detalii pe site-ul oficial.

De exemplu, cu modificările aduse fișierului config.js prezentate mai jos, vom schimba limba, culoarea chenarului și înălțimea editorului.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.language = "en"; //language config.uiColor = "#AADC6E"; //frame color config.height = 300; //frame height );

De asemenea, puteți modifica aspectul editorului setând funcțiile de editor config.toolbarBasic - minimum sau Full - maximum. Sau puteți personaliza editorul utilizând setarea config.toolbar_Basic, așa cum se arată în exemplul de mai jos.

Dacă selectați configurația minimă, capacitățile editorului vor fi limitate și vor fi disponibile doar următoarele butoane: set text îngroșat, font italic, liste, creați un link, ștergeți un link și emoticoane (vezi exemplul de mai jos).

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.width = 1050; //editor window width config.toolbar = "De bază"; //funcționalitate editor, Basic-minimum, Full-maximum config.toolbar_Basic = //setare individuală a Basic modul [ [„Bold”, „Italic”, „-”, „NumberedList”, „BulletedList”, „-”, „Link”, „Unlink”, „-”, „Smiley”] ]);

Există o opțiune de grupare a butoanelor în grupuri și, din nou, aceasta necesită un fișier config.js.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) ( config.toolbarGroups = [ ( nume: „document”, grupuri: [ „mod”, „document”, „doctools” ] ), ( nume: „clipboard”, grupuri: [ „clipboard” " ", "anulați" ]), ( nume: "editare", grupuri: [ "găsi", "selectare", "verificator ortografic", "editare" ]), ( nume: "forme", grupuri: [ "formulare" ] ), „/”, ( nume: „stiluri de bază”, grupuri: [ „stiluri de bază”, „curățare” ] ), ( nume: „paragraf”, grupuri: [ „listă”, „indent”, „blocuri”, „ aliniați „, „bidi”, „paragraf” ]), ( nume: „linkuri”, grupuri: [ „linkuri” ]), ( nume: „inserați”, grupuri: [ „inserați” ]), „/”, ( nume: „stiluri”, grupuri: [ „stiluri” ]), ( nume: „culori”, grupuri: [ „culori” ]), ( nume: „instrumente”, grupuri: [ „instrumente” ]), ( nume: "alții", grupuri: [ "alții" ]), ( nume: "despre", grupuri: [ "despre" ] ) ];

În general, setări de bază editor de text arătat, un lucru care nu mi-a plăcut a fost dimensiunea acestui editor, după descărcare cântărește 4m 265kb, ceea ce este puțin prea mult. Dacă și acest lucru vă deranjează, atunci puteți șterge directorul de mostre și, de asemenea, puteți curăța directorul cu limbi, deoarece cântărește cel mai mult. Există o mulțime de limbi care nu sunt folosite, așa că le puteți elimina pur și simplu și le puteți lăsa doar pe cele necesare, de exemplu rusă și engleză.

Mergem în directorul libs/ckeditor/lang și aici ștergem toate fișierele cu excepția limbii de care aveți nevoie, de exemplu, lăsăm: ru.js și en.js. După toate manipulările efectuate, dimensiunea va fi redusă la jumătate, iar directorul ckeditor va arăta astfel:

Asta e tot pentru mine, oricine cunoaște alte subtilități ale acestui editor, scrie în comentarii.

→ WYSIWYG CKeditor

Cu siguranță mulți dezvoltatori au auzit cel puțin despre existența editorilor HTML încorporați în paginile web. Aș dori să vă prezint, poate, cel mai avansat WYSIWYG de până acum. Pentru cei neinițiați, voi descrie pe scurt despre ce este vorba. despre care vorbim. Dacă dvs. sau clienții dvs. doriți să editați conținutul site-ului cu propriile mâini și să învățați elementele de bază ale html nu există timp sau dorință - atunci Ckeditor este ceea ce ai nevoie.

Anterior, produsul se numea FCKeditor, dar din cauza asociațiilor nesănătoase dintre britanici cu abrevierea FCK (creatorul proiectului Frederico Calderia Knabben), editorul a fost redenumit Ckeditor. Pe lângă numele în noua versiune API-ul pentru lucrul cu fișiere în perl și python a dispărut, cel puțin în distribuția gratuită. Dezvoltatorii oferă mai multe planuri tarifare pentru sprijin și poate în aceste condiții vi se va asigura nu numai ele. Pe în acest moment implicit există asp și php. Folosesc perl în munca mea și voi scrie singur interfața. O voi posta mai tarziu. În general, proiectul are o arhitectură plugin, care este destul de ușor de gestionat dacă înțelegeți JS.

Puteți descărca WYSIWYG ckeditor aici sau pe www.ckeditor.com.

Asa arata el de fapt. Adevărat, ți-am prezentat o versiune ușor dezgolită, dar nu diferă aproape deloc de setul complet.

Conectarea și configurarea ckeditor Conexiune implicită

ckeditor este foarte ușor de conectat și configurat.

1. Descărcați ckeditor și despachetați-l la rădăcina site-ului, CMS sau alt sistem. Dezvoltatorii nu recomandă programatorilor începători să redenumească directoarele și fișierele pentru a evita conflictele în editor. Dacă lăsați totul așa cum este, începerea implicită este o chestiune de câteva minute.

2. În codul paginii, încărcați codul principal și introduceți elementul textarea. În plus, pot exista mai multe elemente de zonă de text, principalul lucru este să le atribuiți identificatori diferiți.

3.Inițializarea este pe gustul tău, dar este mai bine să o faci după ce modelul obiect document este gata.

Pentru Jquery:

$.noConflict();

jQuery(document).ready(funcție($) ( CKEDITOR.replace(„textID”,()); ));

Pentru Ext JS:

Ext.onReady(CKEDITOR.replace("textID",()));

Modul antic:

Sau chiar înainte de eticheta de închidere

Configurare suplimentară

Pentru a schimba setările implicite, ckeditor oferă un fel de fișier de configurare config.js, care se află la /ckeditor/config.js. Conține un hash de configurare.

Iată un exemplu al celui folosit pentru versiunea demo de pe această pagină:

CKEDITOR.editorConfig = function(config) ( config.skin = "kama"; config.uiColor = "#E0E0E0"; config.language = "ru"; config.fullPage = false; config.height = 200; config.removePlugins = „redimensionează, despre, salvează”);

config.skin - interfață. Există trei opțiuni: kama, v2, office2003. Valoarea implicită este kama.

config.uiColor - culoarea interfeței. Funcționează doar pentru kama.

config.language - Limbajul interfeței.

config.fullPage - wrapper pentru documentul editat. Dacă este setată la true, zona editabilă va conține un complet document html, dacă este fals - numai conținut.

config.height - înălțimea zonei editabile în pixeli. Același lucru pentru lățime.

config.removePlugins - Lista butoanelor (plugin-urilor) care trebuie dezactivate. De exemplu: redimensionare - datorită căruia zona editorului poate fi extinsă după cum doriți, ținând colțul din dreapta jos cu mouse-ul, salvați - butonul de salvare.

Cuprins

Când creați un editor în pagina dvs., este posibil să setați configurații care îi schimbă multe aspecte. De exemplu:

ClassicEditor .create(document .querySelector("#editor"), (bara de instrumente: [ "titlu" , "|" , "bold" , "italic" , "link" , "bulletedList" , "numberedList" , "blockQuote" ] , titlu : ( opțiuni : [ ( model : „paragraf” , titlu : „Paragraf” , clasă : „ck-heading_paragraph” ), ( model : „titlu1” , vizualizare: „h1” , titlu : „Titlu 1” , clasă : "ck-heading_heading1" ), ( model : "heading2" , vizualizare: "h2" , titlu : "Titlu 2" , clasa : "ck-heading_heading2" ) ] ) )) .catch(error =>

După cum puteți vedea, configurațiile sunt stabilite de un simplu obiect JavaScript transmis metodei create().

Eliminarea caracteristicilor

Compilările vin cu toate caracteristicile incluse în pachetul de distribuție activate implicit. Ele sunt definite ca pluginuri pentru CKEditor.

În unele cazuri, poate fi necesar să aveți setări diferite de editor în aplicația dvs., toate bazate pe aceeași versiune. În acest scop, trebuie să controlați pluginurile disponibile în editor în timpul execuției.

În exemplul de mai jos, pluginurile Heading și Link sunt eliminate:

// Eliminați câteva pluginuri din configurația implicită.

ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Tit", "Link" ], bara de instrumente: [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( consola .log(eroare); ));

Aveți grijă când eliminați pluginuri din versiunile CKEditor folosind config.removePlugins. Dacă pluginurile eliminate furnizau butoane pentru bara de instrumente, configurația implicită a barei de instrumente inclusă într-o versiune va deveni invalidă. În acest caz, trebuie să furnizați configurația actualizată a barei de instrumente, ca în exemplul de mai sus.

Lista de pluginuri

Fiecare build are un număr de plugin-uri disponibile. Puteți enumera cu ușurință toate pluginurile disponibile în versiunea dvs.:

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

Adăugarea de caracteristici complexe

Deoarece versiunile CKEditor nu includ toate caracteristicile posibile, singura modalitate de a le adăuga mai multe caracteristici este să creați o versiune personalizată .

Adăugarea de funcții simple (autonome).

Există o excepție de la fiecare regulă. Deși este imposibil să adăugați pluginuri care au dependențe la @ckeditor/ckeditor5-core sau @ckeditor/ckeditor5-engine (care include aproape toate pluginurile oficiale existente) fără a reconstrui versiunea, este totuși posibil să adăugați pluginuri simple, fără dependențe. .

importați ClassicEditor din „@ckeditor/ckeditor5-build-classic”; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Încărcați adaptorul de încărcare personalizat ca plugin al editorului.

ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); ));

Configurarea barei de instrumente

Cele de mai sus este o configurație strictă legată de UI. Eliminarea unui element din bara de instrumente nu elimină caracteristica din elementele interne ale editorului. Dacă scopul dvs. cu configurarea barei de instrumente este să eliminați funcții, soluția potrivită este să eliminați și pluginurile respective. Verificați mai sus pentru mai multe informații.

Listarea articolelor disponibile

Puteți folosi următorul fragment pentru a prelua toate elementele din bara de instrumente disponibile în editorul dvs.:

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