...
✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuinka asentaa ja käyttää CKEditoria Laravelissa

16

Haluatko asentaa CKEditorin Laraveliin? CKEditor on WYSIWYG (mitä näet on mitä saat) HTML-editori, jonka avulla voimme kirjoittaa rikkaan tekstin muotoja. Tässä artikkelissa näytän sinulle, kuinka CKEditor asennetaan ja käytetään Laravelissa.

Miksi CKEditoria on käytettävä?

Rich text -editori on välttämätön, jos haluat kirjoittaa rikas sisältöä sivuillesi tai artikkelisi. Verkkosivulla meillä on oltava erilaisia ​​elementtejä, kuten kuvia, kappaleita, linkkejä jne. Kaikki nämä eri elementit voidaan lisätä CKEditorilla.

HTML tarjoaa tekstialue-elementin kuvauksen kirjoittamiseen. Mutta siihen liittyy rajoituksia. Textarealla ei ole helppoa ja käyttäjäystävällistä kirjoittaa muita HTML-elementtejä, kuten p, div, img jne.

Voit voittaa tällaiset rajoitukset käyttämällä CKEditoria, joka itsessään on rikas tekstieditori. Lopullinen editorimme näyttää alla olevalta kuvakaappaukselta.

Kuinka asentaa ja käyttää CKEditoria Laravelissa

Asenna CKEditor Laraveliin

CKEditor voidaan asentaa Laraveliin kahdella tavalla – CDN- tai CKEditor-paketti. Voit saada molemmat resurssit niiden lataussivulta.

CDN-linkki on //cdn.ckeditor.com/4.14.0/standard/ckeditor.js. Jos valitset CDN: n, sinun ei tarvitse ladata mitään CKEditor-verkkosivustolta.

Jos aiot asentaa sen ilman CDN: ää, lataa paketti (suosittelemme Standard Package). Luo seuraavaksi kansio ‘ckeditor’ Laravel-projektisi julkisen hakemiston alle. Ja kopioi tämän ‘ckeditor’ -kansion sisällä tiedostot ja kansiot ladatun paketin alle.

Kuinka asentaa ja käyttää CKEditoria Laravelissa

Kuinka käyttää CKEditoria

Tässä vaiheessa olet suorittanut CKEditor-paketin asentamisen vaiheet. Katsotaan nyt, miten CKEditoria käytetään.

Oletetaan, että sinulla on ‘textarea’, jonka pitäisi korvata CKEditorilla. Voit tehdä niin lisäämällä tunnus "summary-ckeditor" "textareaan".

<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea>

Seuraavaksi sinun on sisällytettävä ckeditor.jstiedosto ja kirjoitettava JavaScript-koodi, joka korvaa ‘textarea’ CKEditorilla.

<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>

Yllä oleva JavaScript-koodi korvaa teksti-alueen CKEditorilla. Jos haluat käyttää CDN: ää, yllä oleva koodi olisi seuraava:

<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>

Suorita sivusi selaimella ja sinun pitäisi nyt nähdä CKeditor. Voit nyt lisätä sisältösi editoriin ja käyttää sitä verkkosivustollasi.

Lähetä ja lisää kuva CKEditoriin

CKEditor ei oletusarvoisesti anna mahdollisuutta ladata kuvaa. Jos joku haluaa antaa tämän vaihtoehdon, jatka tämän artikkelin lukemista. Sen on lisättävä Laravel-reitti, kirjoitettava koodi kuvien lataamista varten ja JavaScripti sovellukseesi. Ensinnäkin, jotta voit ladata kuvan, sinun on soitettava CKEditorille seuraavalla tavalla.

<script>
CKEDITOR.replace( 'summary-ckeditor', {
    filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
    filebrowserUploadMethod: 'form'
});
</script>

Tässä avaimelle filebrowserUploadUrlohitin reitin URL-osoitteen ja csrf-tunnuksen. Määritetään reitti ‘lataa’.

Route::post('ckeditor/image_upload', 'CKEditorController@upload')->name('upload');

Lataa sivu uudelleen. Nyt kun napsautat CKEditorin kuvaketta, näet kuvan latausvaihtoehdon alla olevan kuvan mukaisesti.

Kuinka asentaa ja käyttää CKEditoria Laravelissa

Jotta voit käyttää ladattua kuvaa CKEditorissa, sinun on ladattava kuva sovelluskansioon ja lähetettävä takaisin kuvan URL-osoite. Kuvan tallentamiseen palvelimelle käytän Laravel-tallennusominaisuutta. Joten minun on ensin luotava symboli "tallennuskansiosta". Luo symboli suorittamalla alla oleva komento:

php artisan storage:link

Reittimme "lataa" kartta, jonka latausmenetelmä on CKEditorController. Luo siis ohjain CKEditorControllerja määritä siinä uploadmenetelmä seuraavasti:

<?php
 
namespace AppHttpControllers;
 
use IlluminateHttpRequest;
 
class CKEditorController extends Controller
{
    public function upload(Request $request)
    {
        if($request->hasFile('upload')) {
            //get filename with extension
            $filenamewithextension = $request->file('upload')->getClientOriginalName();
      
            //get filename without extension
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
      
            //get file extension
            $extension = $request->file('upload')->getClientOriginalExtension();
      
            //filename to store
            $filenametostore = $filename.'_'.time().'.'.$extension;
      
            //Upload File
            $request->file('upload')->storeAs('public/uploads', $filenametostore);
 
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('storage/uploads/'.$filenametostore);
            $msg = 'Image successfully uploaded';
            $re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
             
            // Render HTML output
            @header('Content-type: text/html; charset=utf-8');
            echo $re;
        }
    }
}

Se on se, että yrität nyt ladata kuvan CKEditorin sisäänrakennetusta kuvavaihtoehdosta ja saat kuvan lisättyä editoriisi.

Toivon, että ymmärrät CKEditorin asentamisen ja käytön Laravelissa. Ole hyvä ja jaa ajatuksiasi ja ehdotuksiasi alla olevassa kommentissa.

Aiheeseen liittyvät artikkelit

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja