Як встановити та використовувати редактор Trix у Laravel

Останнє оновлення Жов 17, 2021

Зміст

Керуючи веб-сайтом, нам завжди потрібен редактор багатофункціонального тексту (WYSIWYG). Якщо ви хочете додати описовий вміст, який містить HTML, тоді редактор WYSIWYG – єдиний вибір. Ви не можете додати такий вміст у текстову область. Є кілька редакторів текстового тексту, таких як TinyMCE, CKEditor, доступні в Інтернеті. Trix Editor – один із них. Як розробник, ви, напевно, чули про Basecamp. Редактор Trix використовується в Basecamp для управління вмістом. Цього достатньо, щоб сказати про популярність редактора Trix.

У цій статті ми вивчаємо, як встановити та використовувати редактор Trix у Laravel. Ми також побачимо, як завантажувати зображення в редакторі Trix.

Встановлення редактора Trix

Для початку роботи з Trix спочатку потрібно включити їх JS та CSS-файл. Ви можете знайти ці файли на їхній сторінці GitHub у каталозі dist. Завантажити 2 файли trix.jsі trix.cssщо потребують в найближчим часом .

Оскільки нам потрібно включити активи, створіть папки ‘js’ та ‘css’ всередині загальнодоступного каталогу вашого проекту Laravel. Помістіть скопійовані файли JS та CSS у відповідні каталоги.

Для завантаження зображень на сервер за допомогою Trix потрібно додати код JavaScript. Тож створіть attachments.jsфайл і зберігайте його в public/jsпапці. Ми додамо код до цього файлу в наступній частині навчального посібника.

Додайте наступний HTML у файл леза, який відобразить редактор Trix.

<!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>

Вказаний вище HTML відображатиме Trix на вашій веб-сторінці, як показано на скріншоті нижче.

Зверніть увагу, ми розміщуємо редактор Trix в HTML за допомогою trix-editorтегу. Приховане поле з назвою "вміст" використовується для отримання або показу вмісту в редакторі Trix. Коли ми вводимо що-небудь всередині Trix, для цього прихованого поля встановлюється однаковий вміст. На стороні сервера ми отримаємо вміст редактора Trix, використовуючи наведену нижче заяву.

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

Таким же чином, якщо ви хочете відобразити попередньо заповнений вміст у Trix, тоді встановіть значення на приховане поле наступним чином.

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

Завантажте зображення в редактор Trix

Якщо ви хочете використовувати зображення у вмісті, тоді, звичайно, вам потрібно завантажити зображення на сервер. Редактор Trix надає подію, trix-attachment-addза допомогою якої ми завантажимо зображення через Ajax. Давайте визначимо для нього маршрут.

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

Налаштуйте назву контролера в маршруті. У методі завантаження Controller напишіть код наступним чином.

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;
    }
}

Тут я зберігаю зображення під public/uploadsпапкою. Можливо, вам доведеться створити символічне посилання на папку сховища за допомогою команди:

php artisan storage:link

Ми створили attachments.jsфайл, який буде використовуватися для виклику Ajax на подію trix-attachment-add. Додайте код нижче у attachments.jsфайл.

(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 '';
      }
})();

У наведеному вище коді ви повинні передати маршрут до HOSTзмінної. Laravel вимагає маркер CSRF у кожному запиті. Ми отримуємо цей маркер CSRF з мета-тегу HTML, який ми додали у файл леза. Коли ви додаєте зображення в Trix, воно викликає Ajax, завантажує зображення на сервер і повертає шлях до завантаженого зображення.

Сподіваюся, ви розумієте, як встановити та використовувати редактор Trix у Laravel. Будь ласка, поділіться своїми думками та пропозиціями в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net