Kuinka asentaa ja käyttää Trix Editoria Laravelissa
Sivustoa hallinnoidessamme tarvitsemme aina rikkaan tekstieditorin (WYSIWYG). Jos haluat lisätä kuvailevaa sisältöä, joka sisältää HTML: tä, WYSIWYG-editori on ainoa valinta. Et voi lisätä tällaista sisältöä tekstialueeseen. Internetissä on useita rikkaan tekstin muokkaajia, kuten TinyMCE, CKEditor. Trix Editor on yksi niistä. Kehittäjänä sinun on oltava kuullut Basecampista. Trix-editoria käytetään Basecampissa sisällön hallintaan. Tämä riittää sanomaan Trix-editorin suosiosta.
Tässä artikkelissa tutkitaan Trix-editorin asentamista ja käyttöä Laravelissa. Näemme myös, kuinka kuvia lähetetään Trix-editorissa.
Trix Editorin asennus
Trixin käytön aloittamiseksi sinun on ensin sisällytettävä heidän JS- ja CSS-tiedosto. Löydät nämä tiedostot niiden GitHub-sivulta dist-hakemistosta. Lataa 2 tiedostoa trix.jsja trix.cssjoka edellyttää pian.
Koska meidän on sisällytettävä resursseja, luo ‘js’ ja ‘css’ kansio Laravel-projektisi julkiseen hakemistoon. Sijoita kopioidut JS- ja CSS-tiedostot vastaaviin hakemistoihin.
Kuvien lataaminen palvelimelle Trixin avulla edellyttää JavaScript-koodin lisäämistä. Joten luo attachments.jstiedosto ja pidä se public/jskansiossa. Lisäämme koodin tähän tiedostoon opetusohjelman myöhemmässä osassa.
Lisää seuraava HTML korttitiedostoon, joka näyttää Trix-editorin.
<!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>Yllä oleva HTML näyttää Trixin verkkosivustollasi alla olevan kuvakaappauksen mukaisesti.
Huomaa, että sijoitamme Trix-editorin HTML-koodiin trix-editortagin avulla. Piilotettua kenttää, jonka nimi on sisältö, käytetään sisällön hakemiseen tai näyttämiseen Trix Editorissa. Kun kirjoitamme mitä tahansa Trixin sisälle, sama sisältö asetetaan tälle piilotetulle kentälle. Palvelinpuolella saamme Trix-editorin sisällön alla olevan lauseen avulla.
echo $request->input('content');Samalla tavalla, jos haluat näyttää esitäytetyn sisällön Trixissä, aseta arvoksi piilotettu kenttä seuraavasti.
<input id="x" type="hidden" name="content" value="<h1>This is content</h1>" />Lähetä kuva Trix Editoriin
Jos haluat käyttää kuvia sisällössä, sinun on tietysti ladattava kuva palvelimelle. Trix editor tarjoaa tapahtuman, trix-attachment-addjonka avulla lähetämme kuvan Ajaxin kautta. Määritetään sille reitti.
Route::post('upload', 'ProductController@upload');Säädä ohjaimen nimeä reitillä. Kirjoita koodi ohjaimen latausmenetelmään seuraavasti.
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;
}
}Tässä olen tallentamassa kuvia public/uploadskansion alle. Saatat joutua luomaan symbolisen linkin tallennuskansioon komennolla:
php artisan storage:linkOlemme luoneet attachments.jstiedoston, jota käytetään Ajax-puhelun soittamiseen tapahtumaan trix-attachment-add. Lisää alla oleva koodi attachments.jstiedostoon.
(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 '';
}
})();Yllä olevassa koodissa sinun on välitettävä reitti HOSTmuuttujalle. Laravel vaatii CSRF-tunnuksen jokaisessa pyynnössä. Saamme tämän CSRF-tunnuksen HTML-sisällönkuvauskentästä, jonka lisäsimme terätiedostoon. Kun lisäät kuvan Trixiin, se antaa Ajax-puhelun, lataa kuvan palvelimelle ja palauttaa ladatun kuvan polun.
Toivon, että ymmärrät Trix-editorin asentamisen ja käytön Laravelissa. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.