Plugin pentru încărcări de fișiere ckeditor. CKEditor. Adăugarea (încărcarea) imaginilor folosind butonul editor avansat

Am descărcat un editor WYSIWYG bun de pe site-ul oficial și am dat peste o surpriză neplăcută - în funcționalitatea implicită nu există nicio modalitate de a încărca fișiere. Cum să remediați acest lucru, citiți mai departe.

Acum trebuie să creăm acest fișier upload.phpîn folderul editorului însuși. Dacă ați descărcat de pe site-ul oficial, atunci acest folder va fi probe.

Deschideți fișierul upload.phpși lipiți codul din acest fișier acolo:

Acest cod restricționează încărcarea fișierelor în funcție de tip, adică sunt permise doar jpg și png. Pentru a extinde lista extensiilor valide, observați linia: else if (($ _FILES ['upload'] ["type"]! = "image / jpeg") ȘI ($ _FILES ['upload'] ["type"]! = "image / jpeg") ȘI ($ _FILES ['upload'] ["type"]! = "image / png"))

De asemenea, acest cod limitează dimensiunea fișierelor încărcate. Vezi linia altfel dacă ($ _FILES [‘upload’] [„size”] == 0 SAU $ _FILES [‘upload’] [“size”]> 2050000)

Numărul 2.050.000 este numărul de octeți valabili. Pentru a converti în megaocteți, citiți astfel: 2.050.000 octeți / 1.024 / 1.024 = 1,9 MB. Adică, pentru a mări limita la 10MB, citiți astfel: 10MB * 1024KB * 1024B = 10485760.

Acum trebuie doar să schimbăm câteva valori și să pornim din nou editorul. Totul în același fișier upload.php găsiți o linie de genul acesta: move_uploaded_file ($ _ FILES [‘upload’] [‘tmp_name’], „files /res.$ name);

Ea este responsabilă pentru locul în care vor fi încărcate fișierele noastre. În acest caz, dosarul fișiere. Puteți specifica orice alt folder, dar asigurați-vă că acesta există. Dacă nu, creați-o.

Acum găsiți o linie ca aceasta: $ full_path = ‘http: //localhost/ckeditor/samples/files/’.$name;

Ar trebui să fie schimbat la valoarea dvs. Adică, trebuie să schimbați adresa URL în sine în fișierele încărcate " http: // localhost / ckeditor / samples / files /«.

Asta este. După cum puteți vedea, sa dovedit a fi foarte ușor și suficient de rapid pentru a porni această funcție.

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

Descărcați CKEditor de pe site-ul oficial: descărcați ckeditor
Descărcarea fișier gratuit Manager KCFinder: descărcați kcfinder

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

Lăsați pagina să aibă un câmp textarea care trebuie înlocuit cu un editor WYSIWYG:

Apoi, trebuie să specificăm setările în ckeditor, astfel încât atunci când faceți clic pe butonul „încărcați fișierul” sau vizualizați fișierele de pe server, se deschide KCFinder, pentru aceasta 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", "filebrowserl : "/ ckeditor / kcfinder / browse.php? type = flash", "filebrowserUploadUrl": "/ ckeditor / kcfinder / upload.php? type = files", "filebrowserImageUploadUrl": "/ ckeditor / kcfinder / upload.php? = imagini "," filebrowserFlashUploadUrl ":" / ckeditor / kcfinder / upload.php? type = flash "));

În directorul / ckeditor / kcfinder / există un script cu configurația config.php, acolo trebuie să specificați calea către folderul în care vor fi încărcate fișierele adăugate (nu uitați să vedeț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 din editor, textul este inclus într-o etichetă

De asemenea, această etichetă este înregistrată constant atunci când încercăm să salvăm un câmp gol cu ​​un editor atașat. Pentru a remedia acest lucru, adăugați un mic script:

If (typeof CKEDITOR! == "undefined") (CKEDITOR.on ("instanceReady", function (ev) (// Ieșire paragrafe as.ev.editor.dataProcessor.writer.setRules ("*", (liniuță: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true));));)

Eticheta de completare automată a fost eliminată

Acum să eliminăm ambalajul textului din această etichetă când apăsați Enter. Pentru aceasta, adăugați următoarele setări în fișierul de configurare /ckeditor/config.js:

// când apăsați introduceți add br config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;

Dacă se pare că ultimele două linii de cod nu ajută la rezolvarea problemei, ștergeți memoria cache a browserului și retestați, totul ar trebui să funcționeze. Astfel, editorul dvs. CKEditor c manager de fișiere KCFinder este gata de funcționare și arată destul de bine.

Informații suplimentare despre configurarea configurației pot fi găsite pe site-urile oficiale ale editorilor.

- cel mai bun editor de text pentru toată lumea ”(c) (Cel mai bun editor de text web pentru toată lumea). CKEditor este un editor de vizualizare multiplataforma vizual gratuit - adesea folosit pentru a adăuga text îmbogățit în diferite sisteme de gestionare a conținutului (CMS). Editorul este foarte personalizabil, dar în cea mai recentă ediție (versiunea 4 la momentul scrierii) nu există funcționalități pentru încărcarea fotografiilor prin intermediul editorului însuși. Acum suntem la dimensiunea dvs., cum să remediați această deficiență.

Încărcarea imaginilor nu este prezentată, deoarece editorul nu are deloc scripturi de server necesare pentru a încărca fișiere pe server. Nu este clar ce motive i-au determinat pe autorii editorului să dezactiveze această funcționalitate (în Versiunile anterioare a existat), dar fără a încărca imagini, editorul adaugă anumite probleme în formatarea textului. Din fericire, rămâne posibilitatea conectării scripturilor serverului dvs., trebuie doar să îl activați. Nu vom intra în detaliile configurării editorului, ci vom indica imediat ce opțiuni trebuie adăugate pentru aceasta.

Deci, deschideți fișierul config.php situat în rădăcina folderului editor și adăugați două linii (38, 39)

/ ** * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. Toate drepturile rezervate. * Pentru licențiere, consultați LICENȚIA.html sau http://ckeditor.com/license * / CKEDITOR.editorConfig = function (config) (// Definiți aici modificările la configurația implicită. // Pentru referința completă: // http: / /docs.ckeditor.com/#!/api/CKEDITOR.config // Aranjamentul grupurilor de bare de instrumente, optimizat pentru două rânduri de bare de instrumente.config.toolbarGroups = [(nume: "clipboard", grupuri: ["clipboard", "undo" ]), (nume: „editare”, grupuri: [„găsiți”, „selecție”, „verificator ortografic”]), (nume: „linkuri”), (nume: „introduceți”), (nume: „formulare”) , (nume: "instrumente"), (nume: "document", grupuri: ["mod", "document", "doctools"]), (nume: "alții"), "/", (nume: "basicstyles ", grupuri: [" basicstyles "," cleanup "]), (nume:" paragraf ", grupuri: [" listă "," indentare "," blocuri "," aliniați "," bidi "]), (nume: „stiluri”), (nume: „culori”), (nume: „aproximativ”)]; // Eliminați câteva butoane, furnizate de pluginurile standard, pe care nu trebuie să le avem // în standard (e) toolbar. config.removeButtons = "Und erline, Subscript, Superscript "; // Vedeți cele mai comune elemente de bloc. config.format_tags = "p; h1; h2; h3; pre"; // Faceti dialogurile mai simple. config.removeDialogTabs = "imagine: avansat; link: avansat"; config.filebrowserImageUploadUrl = "/js/ckeditor/php/imageupload.php"; config.filebrowserImageBrowseUrl = "/js/ckeditor/php/imagebrowse.php"; );

Linia 38 instruiește editorul să conecteze funcționalitatea de încărcare a fișierului în dialogul de introducere a imaginii, linia 39 conectează funcționalitatea pentru selectarea unei imagini deja încărcate.

Avem editorul instalat în folderul / js / ckeditor / al site-ului. În același loc în care am creat un folder php pentru scripturile serverului nostru, acest folder trebuie să aibă permisiunea de execuție pentru scripturile php.

Script de încărcare a imaginii imageupload.php .

$ upload_dir = "/ images"; // dosarul în care sunt salvate imaginile trebuie să poată fi scrise // formatele permise ale fișierelor grafice (vezi descrierea funcției image_type_to_mime_type $ images_exts = array (IMAGETYPE_GIF => "gif", IMAGETYPE_JPEG => "jpg", IMAGETYPE_PNG => "png" ); $ dir = $ _SERVER ["DOCUMENT_ROOT"]. $ upload_dir; if (! isset ($ _ FILES ["upload"]) &&! is_uploaded_file ($ _ FILES ["upload"] ["tmp_name"])) ( $ message = "Nu ați specificat un fișier de încărcat";) else ($ is = @getimagesize ($ _ FILES ["upload"] ["tmp_name"]); if (! Isset ($ images_exts [$ is]) ) ($ message = "Obligatoriu specificați un fișier cu formatul" .implode (",", $ images_exts);) else ($ name = Transliterare ($ _ FILES ["upload"] ["name"]); $ d = $ dir. "/". $ nume; if ( [e-mail protejat] _uploaded_file ($ _ FILES ["upload"] ["tmp_name"], $ d)) ($ message = "Imposibil de salvat fișierul, verificați setările folderului de fișiere." $ _ FILES ["upload"] ["name"]; ) else ($ full_path = $ upload_dir. "/". $ name; $ message = "";)))?> „A”, „B” => „B”, „C” => „V”, „D” => „G”, „D” => „D”, „E” => „E”, „ E "=>" YO "," F "=>" ZH "," Z "=>" Z "," AND "=>" I "," Y "=>" J "," K "=>" K "," L "=>" L "," M "=>" M "," H "=>" N "," O "=>" O "," P "=>" P "," P "=>" R "," C "=>" S "," T "=>" T "," Y "=>" U "," F "=>" F "," X "=>" H "," Ts "=>" TS "," H "=>" CH "," W "=>" SH "," Щ "=>" SCH "," b "=>" "," b "= > "", "Y" => "Y", "E" => "E", "U" => "YU", "I" => "YA", "a" => "a", " b "=>" b "," c "=>" v "," g "=>" g "," d "=>" d "," e "=>" e "," e "=>" yo "," f "=>" zh "," z "=>" z "," și "=>" i "," d "=>" j "," k "=>" k "," l "=>" l "," m "=>" m "," n "=>" n "," o "=>" o "," n "=>" p "," p "=>" r "," c "=>" s "," t "=>" t "," y "=>" u "," f "=>" f "," x "=>" h "," c " => "ts", "h" => "ch", "w" => "sh", "u" => "sch", "b" => "", "b" => "", " s "=>" y "," e "=>" e "," yu "=>" yu "," i "=>" ya "); returnează preg_replace ("/ _ + /", "_", strtolower (str_replace (array_keys ($ transl), array_values ​​($ transl), $ str))); ) Ieșire (); ?>

Script pentru selectarea imaginilor încărcate imagebrowse.php .

Scriptul imageupload.php este foarte simplu, dar își face treaba. Pentru un număr mare de fișiere, afișarea listei de fișiere va încetini, în plus, miniaturile fișierelor sunt comprimate folosind browserul, astfel încât traficul de internet va fi egal cu traficul de imagini de dimensiuni mari. În mod ideal, acest script ar trebui să fie rescris temeinic, dar acest lucru depășește scopul acestei postări.

Sa întâmplat că oportunitatea încărcați fișiere prin editorul CKeditor, dezactivat în mod implicit. În acest articol, vom face ca editorul nostru WYSIWYG să încarce imagini și multe altele.

Dacă nu știți ce este un editor CKeditor WYSIWYG, atunci în acest articol totul este scris în detaliu.

Pentru a roti această focalizare, avem nevoie de CKeditor cu pluginul de inserare a imaginii instalat (de obicei încorporat în editor în mod implicit) și doar mâini drepte.

1. Deschideți fișierul din folder cu editorul: \ plugins \ image \ dialogs \ image.js

Acum trebuie să găsim ceva în fișier și să-l schimbăm. Trebuie să spun imediat că ceea ce vom căuta, uneori versiunea s-a schimbat din versiune, deci ar trebui să aveți unul dintre cuvintele date.

Trebuie să căutați: config.filebrowserBrowseUrl sau filebrowserImageBrowseLinkUrl sau id: „Încarcă”... În absența unor potriviri exacte, care este probabil să fie, căutați cuvintele Încărcareși Fişier... lângă cea găsită, căutați o astfel de expresie - ascuns: adevărat sau ascuns :! 0și schimbați-l în ascuns: fals.

2. Pentru a verifica succesul pasului anterior în editor, apăsați butonul pentru a insera imagini - ar trebui să apară fila „Încărcare”, deschizând pe care veți vedea butonul și câmpul de selectare a fișierului. Nu va funcționa în acest stadiu, iar acest lucru este destul de rezonabil.

Atenţie! Foarte de multe ori browserele ascund în cache fișierul image.jsși după ce îl modificați, nu se reîncarcă, așa că încercați să deschideți site-ul într-un alt browser dacă nu ați observat modificările.

3. După ce a apărut fila, treceți la pasul următor.

În dosarul cu editorul, găsiți fișierul config.jsși deschide-l. În conținutul fișierului din interiorul expresiei:

CKEDITOR.editorConfig = funcție (config)

acestea. undeva între ghilimele " { „și la sfârșitul fișierului” } "introduceți linia:

config.filebrowserUploadUrl = "../upload.php";

În linia de mai sus ../ upload.php este calea către handler. Calea merge în prezent la fișierul upload.php, care este situat la un nivel deasupra folderului conținut ckeditor. Cel mai probabil, acest fișier va fi la rădăcina site-ului dvs., dacă înțelegeți întregul dispozitiv, îl puteți schimba la discreția dvs.

Acum, lăsăm folderul cu conținutul editorului și creăm fișierul nostru upload.php. Îl completăm cu următorul conținut:

function getex ($ filename) (
return end (explode (".", $ fișier));
}
if ($ _ FILES ["upload"])
{
if (($ _FILES ["upload"] == "none") SAU (gol ($ _ FILES ["upload"] ["name"])))
{
$ message = "Nu ați selectat un fișier";
}
altfel dacă ($ _FILES ["upload"] ["size"] == 0 SAU $ _FILES ["upload"] ["size"]> 2050000)
{
$ message = "Dimensiunea fișierului în afara intervalului";
}
else if (($ _FILES ["upload"] ["type"]! = "image / jpeg") ȘI ($ _FILES ["upload"] ["type"]! = "image / jpeg") ȘI ($ _FILES ["upload"] ["type"]! = "image / png"))
{
$ message = "Numai imaginile JPG și PNG pot fi încărcate.";
}
altfel if (! is_uploaded_file ($ _ FILES ["upload"] ["tmp_name"]))
{
$ message = "Ceva nu a funcționat bine. Încercați să încărcați din nou fișierul.";
}
altceva (
$ nume = rand (1, 1000). "-". md5 ($ _ FILES ["upload"] ["name"]). ".". getex ($ _ FILES ["upload"] ["name"] );
move_uploaded_file ($ _ FILES ["upload"] ["tmp_name"], "images /".$ name);
$ full_path = "http: // site / images /". $ nume;
$ message = "File". $ _ FILES ["upload"] ["name"]. "uploaded";
[e-mail protejat]("imagini /".$ nume);
if ($ size<50 OR $size<50){
deconectați („images /".$ name);
$ message = "Fișierul nu este o imagine validă";
$ full_path = "";
}
}
$ callback = $ _REQUEST ["CKEditorFuncNum"];
ecou "";
}
?>

Acum fișierul dvs. va accepta doar imagini PNG și JPEG de până la 2 MB pentru încărcare (Realizat din motive de securitate). De asemenea, puteți parcurge codul și puteți schimba totul după bunul plac.

Cel mai important, modificați următoarele în cod:

În linie move_uploaded_file ($ _ FILES ["upload"] ["tmp_name"], "images /".$ name); Schimbare imagini /în dosarul în care vor fi încărcate imaginile în raport cu fișierul upload.php.

De asemenea, specificați în variabilă $ full_path Schimbare http: // site / images / către calea absolută către folderul de imagini descărcate.

4. Atât. Încărcarea imaginilor în CKeditor nu mai este o problemă. Dacă găsiți complexul de manipulare și doriți să vedeți aici și o versiune „ușoară” în care puteți încărca totul, scrieți în comentarii.