CKE redaktorius. Vaizdų pridėjimas (įkėlimas) naudojant išplėstinio rengyklės mygtuką

Mažuose projektuose, kuriems reikia minimalių wysiwyg redaktoriaus funkcijų, naudoju standartinę Ckeditor versiją. ckeditor leidžia įterpti vaizdus į tekstą, pirmiausia įkeliant juos į serverį. Paprastai tai atlieka failų tvarkyklė, kuri atsidaro paspaudus mygtuką „Naršyti failus“.

Bet kartais funkcionalumas failų tvarkyklė perteklinis. Jums tereikia pasirinkti failą kompiuteryje, jį atsisiųsti ir įklijuoti į tekstą. Norėdami tai padaryti, naudokite įskiepio įskiepį, kuris turi būti prijungtas prie ckeditor. Patogu iš karto sukonfigūruoti ckeditor naudojant šį įskiepį, kad nereikėtų nerimauti dėl šio papildinio priklausomybių sprendimo. Pridedamas įkėlimo vaizdas naujas skirtukasį vaizdo įterpimo langą.

Kad papildinys veiktų, ckeditor config.js konfigūracijos faile turite nurodyti kelią į vaizdo įkėlimo tvarkyklę serveryje.

public/ckeditor/config.js

Config.fiebrowserUploadUrl = "/upload-image";

Tai užbaigia ckeditor sąranką. Dabar įdiegkime atsisiuntimo funkciją serveryje. Pridėkime naują maršrutą į web.php failą. Paprastumo ir aiškumo dėlei vaizdo įkėlimo kodo nedėsiu į atskirą valdiklį, o įrašysiu tiesiai į maršrutus.

routes/web.php

Route::post("įkelti vaizdą", function(\Illuminate\Http\Request $request, Illuminate\Contracts\Validation\Factory $validator) ( $v = $validator->make($request->all(), [ "įkelti" => "required|image", ]); $funcNum = $request->input("CKEditorFuncNum") ($v->fails()) (atgal atsakymas(" window.parent.CKEDITOR). tools.callFunction(($funcNum), "", "($v->errors()->first())"); $vaizdas = $request->file("įkelti"); $vaizdas - >store("viešas/įkėlimai"); $url = asset("saugykla/įkėlimai/".$image->hashName()) return response(" window.parent.CKEDITOR.tools.callFunction(($funcNum) , "($url)", "Vaizdas sėkmingai įkeltas"); ));

Nes ckeditor siunčia vaizdą su POST užklausa, o laravel patikrina CSRF prieigos raktą, kurio ckeditor nesiunčia, reikia įtraukti naujai sukurtą maršrutą į išimtis, kad laravel netikrintų tokeno:

app/Http/Middleware/VerifyCsrfToken.php

Dabar jūsų failą bus leidžiama tik atsisiųsti PNG vaizdai ir JPEG neviršija 2 MB (atlikta saugumo požiūriu). Taip pat galite suprasti kodą ir viską keisti savo nuožiūra.

Svarbiausia kode pakeisti šiuos dalykus:

Eilėje move_uploaded_file($_FILES["įkelti"]["tmp_pavadinimas"], "images/".$vardas); pakeisti vaizdai/į aplanką, kuriame bus atsisiunčiami su failu susiję vaizdai įkelti.php.

Be to, nurodykite kintamajame $full_path pakeisti http://site/images/į absoliutų kelią į aplanką su atsisiųstais vaizdais.

4. Tai viskas. Dabar nuotraukų įkėlimas į CKeditor nebėra problema. Jei manote, kad procesorius yra sudėtingas ir norite čia pamatyti „lengvą“ versiją, kurioje galite atsisiųsti viską, parašykite komentaruose.

- geriausia teksto redaktorius visiems“ (c) (geriausias žiniatinklio teksto rengyklė visiems). CKEditor yra nemokama vaizdinė kelių platformų naršyklės rengyklė, kuri dažnai naudojama raiškiajam tekstui įtraukti į įvairias turinio valdymo sistemas (TVS). Redagavimo priemonė yra labai pritaikoma, tačiau naujausiame leidime (4 versija šio įrašo rašymo metu) nėra funkcijų, leidžiančių įkelti nuotraukas per patį redaktorių. Dabar išsiaiškinsime, kaip ištaisyti šį trūkumą.

Vaizdų įkėlimas nepateikiamas, nes redaktorius neturi serverio scenarijų, reikalingų failams įkelti į serverį. Neaišku, kokios priežastys paskatino redaktoriaus autorius išjungti šią funkciją (in ankstesnės versijos jis egzistavo), tačiau neįkeldamas vaizdų redaktorius įveda tam tikras teksto formatavimo problemas. Laimei, galimybė prijungti serverio scenarijus išlieka, tereikia ją įjungti. Mes nesigilinsime į redaktoriaus konfigūravimo detales, bet iš karto nurodysime, kurias parinktis reikia pridėti.

Taigi atidarykite failą config.php, esantį redaktoriaus aplanko šaknyje, ir pridėkite dvi eilutes (38, 39)

/** * @licencija Autorių teisės (c) 2003–2014, CKSource – Frederico Knabben. Visos teisės saugomos.

* Norėdami gauti licenciją, žr. LICENSE.html arba http://ckeditor.com/license */ CKEDITOR.editorConfig = function(config) ( // Čia apibrėžkite numatytosios konfigūracijos pakeitimus. // Visą informaciją rasite: // http:/ /docs.ckeditor.com/#!/api/CKEDITOR.config // Įrankių juostos išdėstymas, optimizuotas dviem įrankių juostos eilutėms config.toolbarGroups = [ ( pavadinimas: "iškarpinė", grupės: [ "iškarpinė", "anuliuoti"). ]), ( pavadinimas: "redagavimas", grupės: [ "rasti", "pasirinkimas", "rašybos tikrintuvas" ]), ( pavadinimas: "nuorodos" ), ( pavadinimas: "įterpti" ), ( pavadinimas: "formos" ) , ( pavadinimas: "įrankiai" ), ( pavadinimas: "dokumentas", grupės: [ "režimas", "dokumentas", "dokumentai" ]), ( pavadinimas: "kiti" ), "/", ( pavadinimas: "pagrindiniai stiliai" " ", grupės: [ "pagrindai", "valymas" ]), ( pavadinimas: "pastraipa", grupės: [ "sąrašas", "įtrauka", "blokai", "lygiuoti", "bodi" ]), ( pavadinimas : "styles", ( pavadinimas: "colors"), ( pavadinimas: "apie" ) ] // Pašalinti kai kuriuos mygtukus, kuriuos suteikia standartiniai įskiepiai, kurių standarte (-uose) neturime // toolbar.config.removeButtons = "Pabraukimas,apatinis indeksas, viršutinis indeksas";

// Žr. dažniausiai pasitaikančius bloko elementus.

config.format_tags = "p;h1;h2;h3;pre";

Operacija