Kuidas Trix Editori Laravelis installida ja kasutada

Viimati uuendatud okt. 17, 2021

Sisu

Veebisaidi haldamisel vajame alati rikkaliku teksti redaktorit (WYSIWYG). Kui soovite lisada kirjeldavat sisu, mis sisaldab HTML-i, on ainus valik WYSIWYG-redaktor. Sellist sisu ei saa tekstialasse lisada. Internetis on mitu rikkaliku teksti redaktorit, näiteks TinyMCE, CKEditor. Trix Editor on üks neist. Arendajana olete kindlasti kuulnud Basecampist. Trixi redaktorit kasutatakse Basecampis sisu haldamiseks. Sellest piisab Trixi toimetaja populaarsuse kohta rääkimiseks.

Selles artiklis uurime, kuidas Trixi redaktorit Laravelis installida ja kasutada. Trixi redaktoris näeme ka seda, kuidas pilte üles laadida.

Trix Editori installimine

Trixiga alustamiseks peate kõigepealt lisama nende JS- ja CSS-faili. Need failid leiate nende GitHubi lehelt dist kataloogist. Laadige alla 2 faili trix.jsja trix.csssee nõuab varsti.

Kuna peame varad kaasama, looge oma Laraveli projekti avalikus kataloogis kaustad js ja css. Pange kopeeritud JS- ja CSS-failid vastavatesse kataloogidesse.

Piltide serverisse üleslaadimine Trixi abil nõuab JavaScripti koodi lisamist. Nii et looge attachments.jsfail ja hoidke seda public/jskausta all. Lisame sellele failile koodi juhendaja hilisemas osas.

Lisage järgmine HTML labafaili, mis kuvab Trixi redaktori.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ asset('/css/trix.css') }}">
</head>
<body>
    <form method="post" action={{ url('ROUTE_HERE') }}>
        {{ csrf_field() }}
        <p>
            <input id="x" type="hidden" name="content" value="" />
            <trix-editor input="x"></trix-editor>
        </p>
        <input type="submit" name="submit" value="Submit" />
    </form>
     
    <script src="{{ asset('js/trix.js') }}"></script>
    <script src="{{ asset('js/attachments.js') }}"></script>
</body>
</html>

Ülaltoodud HTML kuvab teie veebisaidil Trixi, nagu on näidatud alloleval ekraanipildil.

Pange tähele, et Trixi redaktori paigutame trix-editormärgendi abil HTML-i. Peidetud välja nimega ‘content’ kasutatakse sisu hankimiseks või kuvamiseks Trix Editoris. Kui sisestame midagi Trixi sisse, määratakse sellele peidetud väljale sama sisu. Serveripoolel saame Trixi redaktori sisu, kasutades allolevat lauset.

echo $request->input('content');

Samamoodi, kui soovite Trixis kuvada eeltäidetud sisu, määrake varjatud välja väärtuseks järgmiselt.

<input id="x" type="hidden" name="content" value="<h1>This is content</h1>" />

Laadige pilt üles Trix Editoris

Kui soovite sisus pilte kasutada, peate loomulikult pildi serverisse üles laadima. Trixi redaktor pakub sündmuse, trix-attachment-addmille abil me ajaxi kaudu pildi üles laadime. Määratleme selle marsruut.

Route::post('upload', 'ProductController@upload');

Reguleerige marsruudil kontrolleri nime. Kontrolleri üleslaadimismeetodisse kirjutage kood järgmiselt.

public function upload(Request $request)
{
    if($request->hasFile('file')) {
        //get filename with extension
        $filenamewithextension = $request->file('file')->getClientOriginalName();
  
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
  
        //get file extension
        $extension = $request->file('file')->getClientOriginalExtension();
  
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
  
        //Upload File
        $request->file('file')->storeAs('public/uploads', $filenametostore);
  
        // you can save image path below in database
        $path = asset('storage/uploads/'.$filenametostore);
 
        echo $path;
        exit;
    }
}

Siin hoian pilte public/uploadskausta all. Võimalik, et peate käsu abil looma sümboolse lingi salvestuskausta.

php artisan storage:link

Oleme loonud attachments.jsfaili, mida kasutatakse sündmusele Ajaxi kõne tegemiseks trix-attachment-add. Lisage attachments.jsfaili allolev kood .

(function() {
    var HOST = "http://localhost:8000/upload"; //pass the route
  
    addEventListener("trix-attachment-add", function(event) {
        if (event.attachment.file) {
            uploadFileAttachment(event.attachment)
        }
    })
  
    function uploadFileAttachment(attachment) {
        uploadFile(attachment.file, setProgress, setAttributes)
  
        function setProgress(progress) {
            attachment.setUploadProgress(progress)
        }
  
        function setAttributes(attributes) {
            attachment.setAttributes(attributes)
        }
    }
  
    function uploadFile(file, progressCallback, successCallback) {
        var formData = createFormData(file);
        var xhr = new XMLHttpRequest();
         
        xhr.open("POST", HOST, true);
        xhr.setRequestHeader( 'X-CSRF-TOKEN', getMeta( 'csrf-token') );
  
        xhr.upload.addEventListener("progress", function(event) {
            var progress = event.loaded / event.total * 100
            progressCallback(progress)
        })
  
        xhr.addEventListener("load", function(event) {
            var attributes = {
                url: xhr.responseText,
                href: xhr.responseText + "?content-disposition=attachment"
            }
            successCallback(attributes)
        })
  
        xhr.send(formData)
    }
  
    function createFormData(file) {
        var data = new FormData()
        data.append("Content-Type", file.type)
        data.append("file", file)
        return data
    }
 
    function getMeta(metaName) {
        const metas = document.getElementsByTagName('meta');
       
        for (let i = 0; i < metas.length; i++) {
          if (metas[i].getAttribute('name') === metaName) {
            return metas[i].getAttribute('content');
          }
        }
       
        return '';
      }
})();

Ülaltoodud koodis peaksite edastama marsruudi HOSTmuutujale. Laravel nõuab igas taotluses CSRF-märki. Selle CSRF-i märgi saame HTML-metasildilt, mille lisasime labafaili. Kui lisate pildi Trixis, helistab see Ajaxile, laadib pildi serverisse üles ja tagastab üleslaaditud pildi tee.

Loodan, et saate aru, kuidas Trixi redaktorit Laravelis installida ja kasutada. Palun jagage oma mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.

seotud artiklid

: artisansweb.net