Como instalar e usar o Trix Editor no Laravel

Last updated Out 18, 2021

Contente

Instalação do Trix Editor

Para começar a usar o Trix, primeiro você precisa incluir seus arquivos JS e CSS. Você pode encontrar esses arquivos na página do GitHub no diretório dist. Baixe 2 arquivos trix.jse trix.cssque exigirão em breve.

Como precisamos incluir ativos, crie uma pasta ‘js’ e ‘css’ dentro do diretório público do seu projeto Laravel. Coloque os arquivos JS e CSS copiados nos respectivos diretórios.

Carregar imagens no servidor usando Trix requer que você adicione o código JavaScript. Portanto, crie um attachments.jsarquivo e mantenha-o na public/jspasta. Adicionaremos código a este arquivo na parte posterior do tutorial.

Adicione o seguinte HTML ao arquivo blade que exibirá o editor 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>

O HTML acima exibirá o Trix em sua página da web, conforme mostrado na captura de tela abaixo.

Observe, colocamos o editor Trix em HTML usando a trix-editortag. O campo oculto com o nome ‘conteúdo’ é usado para obter ou mostrar conteúdo no Editor Trix. Quando digitamos qualquer coisa dentro do Trix, o mesmo conteúdo é definido para este campo oculto. No lado do servidor, obteremos o conteúdo do editor Trix usando a instrução abaixo.

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

Da mesma forma, se você deseja exibir o conteúdo pré-preenchido no Trix, defina o valor para o campo oculto da seguinte forma.

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

Carregar imagem no editor Trix

Se você quiser usar imagens no conteúdo, é claro que precisa fazer o upload da imagem no servidor. O editor Trix fornece um evento trix-attachment-addcom o qual faremos o upload da imagem através do Ajax. Vamos definir uma rota para isso.

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

Ajuste o nome do controlador na rota. No método de upload do Controlador, escreva o código da seguinte maneira.

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

Aqui, estou armazenando imagens na public/uploadspasta. Pode ser necessário criar um link simbólico para a pasta de armazenamento usando o comando:

php artisan storage:link

Criamos um attachments.jsarquivo que será usado para dar uma chamada Ajax no evento trix-attachment-add. Adicione o código abaixo no attachments.jsarquivo.

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

No código acima, você deve passar a rota para a HOSTvariável. O Laravel requer um token CSRF em cada solicitação. Obtemos esse token CSRF da metatag HTML que adicionamos ao arquivo blade. Quando você adiciona a imagem no Trix, ele dá uma chamada Ajax, carrega a imagem no servidor e retorna o caminho da imagem carregada.

Espero que você entenda como instalar e usar o editor Trix no Laravel. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.

Como instalar e usar o Trix Editor no Laravel

Instalação do Trix Editor

Carregar imagem no editor Trix

Artigos relacionados