{"id":28400,"date":"2021-06-09T18:16:00","date_gmt":"2021-06-09T15:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28400"},"modified":"2021-10-18T04:03:13","modified_gmt":"2021-10-18T01:03:13","slug":"como-instalar-e-usar-o-trix-editor-no-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-instalar-e-usar-o-trix-editor-no-laravel\/","title":{"rendered":"Como instalar e usar o Trix Editor no Laravel"},"content":{"rendered":"

Ao gerenciar um site, sempre precisamos de um editor de rich text (WYSIWYG). Se voc\u00ea deseja adicionar conte\u00fado descritivo que contenha HTML, o editor WYSIWYG \u00e9 a \u00fanica op\u00e7\u00e3o. Voc\u00ea n\u00e3o pode adicionar esse tipo de conte\u00fado na \u00e1rea de texto. Existem v\u00e1rios editores de rich text, como TinyMCE<\/a>, CKEditor<\/a>, dispon\u00edveis na Internet. O Trix Editor<\/a> \u00e9 um deles. Como desenvolvedor, voc\u00ea deve ter ouvido falar do Basecamp. O editor Trix \u00e9 usado no Basecamp para gerenciamento de conte\u00fado. Isso \u00e9 o suficiente para dizer sobre a popularidade do editor Trix.<\/p>\n

Neste artigo, estudamos como instalar e usar o editor Trix no Laravel. Tamb\u00e9m veremos como fazer upload de imagens no editor Trix.<\/p>\n

Instala\u00e7\u00e3o do Trix Editor<\/h3>\n

Para come\u00e7ar a usar o Trix, primeiro voc\u00ea precisa incluir seus arquivos JS e CSS. Voc\u00ea pode encontrar esses arquivos na p\u00e1gina do GitHub no diret\u00f3rio dist<\/a>. Baixe 2 arquivos trix.js<\/code>e trix.css<\/code>que exigir\u00e3o em breve.<\/p>\n

Como precisamos incluir ativos, crie uma pasta ‘js’ e ‘css’ dentro do diret\u00f3rio p\u00fablico do seu projeto Laravel. Coloque os arquivos JS e CSS copiados nos respectivos diret\u00f3rios.<\/p>\n

Carregar imagens no servidor usando Trix requer que voc\u00ea adicione o c\u00f3digo JavaScript. Portanto, crie um attachments.js<\/code>arquivo e mantenha-o na public\/js<\/code>pasta. Adicionaremos c\u00f3digo a este arquivo na parte posterior do tutorial.<\/p>\n

Adicione o seguinte HTML ao arquivo blade que exibir\u00e1 o editor Trix.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"{{ asset('\/css\/trix.css') }}\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<form method=\"post\" action={{ url('ROUTE_HERE') }}>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<trix-editor input=\"x\"><\/trix-editor>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/trix.js') }}\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"{{ asset('js\/attachments.js') }}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
O HTML acima exibir\u00e1 o Trix em sua p\u00e1gina da web, conforme mostrado na captura de tela abaixo.<\/p>\n
Observe, colocamos o editor Trix em HTML usando a trix-editor<\/code>tag. O campo oculto com o nome ‘conte\u00fado’ \u00e9 usado para obter ou mostrar conte\u00fado no Editor Trix. Quando digitamos qualquer coisa dentro do Trix, o mesmo conte\u00fado \u00e9 definido para este campo oculto. No lado do servidor, obteremos o conte\u00fado do editor Trix usando a instru\u00e7\u00e3o abaixo.<\/p>\n
echo $request->input('content');<\/code><\/pre>\n
Da mesma forma, se voc\u00ea deseja exibir o conte\u00fado pr\u00e9-preenchido no Trix, defina o valor para o campo oculto da seguinte forma.<\/p>\n
<input id=\"x\" type=\"hidden\" name=\"content\" value=\"<h1>This is content<\/h1>\" \/><\/code><\/pre>\n
Carregar imagem no editor Trix<\/h3>\n
Se voc\u00ea quiser usar imagens no conte\u00fado, \u00e9 claro que precisa fazer o upload da imagem no servidor. O editor Trix fornece um evento trix-attachment-add<\/code>com o qual faremos o upload da imagem atrav\u00e9s do Ajax. Vamos definir uma rota para isso.<\/p>\n
Route::post('upload', 'ProductController@upload');<\/code><\/pre>\n
Ajuste o nome do controlador na rota. No m\u00e9todo de upload do Controlador, escreva o c\u00f3digo da seguinte maneira.<\/p>\n
public function upload(Request $request)\n{\n\u00a0\u00a0\u00a0\u00a0if($request->hasFile('file')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('file')->getClientOriginalName();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('file')->getClientOriginalExtension();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('file')->storeAs('public\/uploads', $filenametostore);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ you can save image path below in database\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$path = asset('storage\/uploads\/'.$filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $path;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0exit;\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Aqui, estou armazenando imagens na public\/uploads<\/code>pasta. Pode ser necess\u00e1rio criar um link simb\u00f3lico para a pasta de armazenamento usando o comando:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Criamos um attachments.js<\/code>arquivo que ser\u00e1 usado para dar uma chamada Ajax no evento trix-attachment-add<\/code>. Adicione o c\u00f3digo abaixo no attachments.js<\/code>arquivo.<\/p>\n
(function() {\n\u00a0\u00a0\u00a0\u00a0var HOST = \"http:\/\/localhost:8000\/upload\"; \/\/pass the route\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0addEventListener(\"trix-attachment-add\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.attachment.file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFileAttachment(event.attachment)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFileAttachment(attachment) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFile(attachment.file, setProgress, setAttributes)\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setProgress(progress) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setUploadProgress(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setAttributes(attributes) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setAttributes(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFile(file, progressCallback, successCallback) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var formData = createFormData(file);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var xhr = new XMLHttpRequest();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.open(\"POST\", HOST, true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.setRequestHeader( 'X-CSRF-TOKEN', getMeta( 'csrf-token') );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.upload.addEventListener(\"progress\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var progress = event.loaded \/ event.total * 100\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0progressCallback(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.addEventListener(\"load\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var attributes = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: xhr.responseText,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0href: xhr.responseText + \"?content-disposition=attachment\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0successCallback(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.send(formData)\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0function createFormData(file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = new FormData()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"Content-Type\", file.type)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"file\", file)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return data\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function getMeta(metaName) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const metas = document.getElementsByTagName('meta');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (let i = 0; i < metas.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (metas[i].getAttribute('name') === metaName) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return metas[i].getAttribute('content');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return '';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n})();<\/code><\/pre>\n
No c\u00f3digo acima, voc\u00ea deve passar a rota para a HOST<\/code>vari\u00e1vel. O Laravel requer um token CSRF em cada solicita\u00e7\u00e3o. Obtemos esse token CSRF da metatag HTML que adicionamos ao arquivo blade. Quando voc\u00ea adiciona a imagem no Trix, ele d\u00e1 uma chamada Ajax, carrega a imagem no servidor e retorna o caminho da imagem carregada.<\/p>\n
Espero que voc\u00ea entenda como instalar e usar o editor Trix no Laravel. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n