Как установить и использовать редактор Trix в Laravel

Последнее обновление Июл 12, 2021

Содержание

При управлении веб-сайтом нам всегда нужен редактор форматированного текста (WYSIWYG). Если вы хотите добавить описательный контент, содержащий HTML, то единственный выбор – редактор WYSIWYG. Вы не можете добавить такой контент в текстовое поле. В Интернете доступно несколько редакторов форматированного текста, таких как TinyMCE, CKEditor. Trix Editor – один из них. Как разработчик, вы наверняка слышали о Basecamp. Редактор Trix используется в Basecamp для управления контентом. Этого достаточно, чтобы сказать о популярности редактора Trix.

В этой статье мы изучаем, как установить и использовать редактор Trix в Laravel. Мы также увидим, как загружать изображения в редактор Trix.

Установка Trix Editor

Чтобы начать работу с 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 Editor. Когда мы вводим что-либо внутри Trix, в это скрытое поле устанавливается тот же контент. На стороне сервера мы получим содержимое редактора Trix, используя приведенную ниже инструкцию.

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

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

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

Загрузить изображение в Trix Editor

Если вы хотите использовать изображения в контенте, то, конечно, вам необходимо загрузить изображение на сервер. В редакторе Trix есть событие, trix-attachment-addс помощью которого мы будем загружать изображение через Ajax. Определим для него маршрут.

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

Измените имя контроллера в маршруте. В методе загрузки контроллера напишите код следующим образом.

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