{"id":29178,"date":"2021-06-09T17:40:00","date_gmt":"2021-06-09T14:40:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29178"},"modified":"2021-10-17T16:23:56","modified_gmt":"2021-10-17T13:23:56","slug":"como-instalar-y-usar-trix-editor-en-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-instalar-y-usar-trix-editor-en-laravel\/","title":{"rendered":"C\u00f3mo instalar y usar Trix Editor en Laravel"},"content":{"rendered":"

Al administrar un sitio web, siempre necesitamos un editor de texto enriquecido (WYSIWYG). Si desea agregar contenido descriptivo que contenga HTML, el editor WYSIWYG es la \u00fanica opci\u00f3n. No puede agregar ese tipo de contenido en el \u00e1rea de texto. Hay varios editores de texto enriquecido como TinyMCE<\/a>, CKEditor<\/a> disponibles en Internet. Trix Editor<\/a> es uno de ellos. Como desarrollador, debes haber o\u00eddo hablar de Basecamp. El editor Trix se usa en Basecamp para administrar contenido. Esto es suficiente para decir sobre la popularidad del editor Trix.<\/p>\n

En este art\u00edculo, estudiamos c\u00f3mo instalar y usar el editor Trix en Laravel. Tambi\u00e9n veremos c\u00f3mo subir im\u00e1genes en el editor de Trix.<\/p>\n

Instalaci\u00f3n de Trix Editor<\/h3>\n

Para comenzar con Trix, primero debe incluir su archivo JS y CSS. Puede encontrar estos archivos en su p\u00e1gina de GitHub en el directorio dist<\/a>. Descarga 2 archivos trix.js<\/code>y trix.css<\/code>los requerir\u00e1 pronto.<\/p>\n

Como necesitamos incluir activos, cree una carpeta ‘js’ y ‘css’ dentro del directorio p\u00fablico de su proyecto Laravel. Coloque los archivos JS y CSS copiados en los directorios respectivos.<\/p>\n

La carga de im\u00e1genes en el servidor usando Trix requiere que agregue c\u00f3digo JavaScript. As\u00ed que cree un attachments.js<\/code>archivo y gu\u00e1rdelo en la public\/js<\/code>carpeta. Agregaremos c\u00f3digo a este archivo en la parte posterior del tutorial.<\/p>\n

Agregue el siguiente HTML en el archivo blade que mostrar\u00e1 el 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
El HTML anterior mostrar\u00e1 las Trix en su p\u00e1gina web como se muestra en la captura de pantalla a continuaci\u00f3n.<\/p>\n
Observe, colocamos el editor Trix en HTML usando la trix-editor<\/code>etiqueta. El campo oculto con el nombre ‘contenido’ se usa para obtener o mostrar contenido en Trix Editor. Cuando escribimos algo dentro de Trix, el mismo contenido se establece en este campo oculto. En el lado del servidor, obtendremos el contenido del editor de Trix usando la siguiente declaraci\u00f3n.<\/p>\n
echo $request->input('content');<\/code><\/pre>\n
De la misma manera, si desea mostrar contenido precargado en Trix, establezca el valor en el campo oculto de la siguiente manera.<\/p>\n
<input id=\"x\" type=\"hidden\" name=\"content\" value=\"<h1>This is content<\/h1>\" \/><\/code><\/pre>\n
Cargar imagen en Trix Editor<\/h3>\n
Si desea utilizar im\u00e1genes en el contenido, por supuesto, debe cargar la imagen en el servidor. El editor Trix proporciona un evento trix-attachment-add<\/code>mediante el cual cargaremos la imagen a trav\u00e9s de Ajax. Definamos una ruta para ello.<\/p>\n
Route::post('upload', 'ProductController@upload');<\/code><\/pre>\n
Ajuste el nombre del controlador en la ruta. En el m\u00e9todo de carga de Controller, escriba el c\u00f3digo de la siguiente manera.<\/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
Aqu\u00ed, estoy almacenando im\u00e1genes en la public\/uploads<\/code>carpeta. Es posible que deba crear un enlace simb\u00f3lico a la carpeta de almacenamiento con el comando:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Hemos creado un attachments.js<\/code>archivo que se utilizar\u00e1 para realizar una llamada Ajax en el evento trix-attachment-add<\/code>. Agregue el siguiente c\u00f3digo en el attachments.js<\/code>archivo.<\/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
En el c\u00f3digo anterior, debe pasar la ruta a la HOST<\/code>variable. Laravel requiere un token CSRF en cada solicitud. Obtenemos este token CSRF de la metaetiqueta HTML que agregamos en el archivo blade. Cuando agrega la imagen en Trix, realiza una llamada Ajax, carga la imagen en el servidor y devuelve la ruta de la imagen cargada.<\/p>\n
Espero que entiendas c\u00f3mo instalar y usar el editor Trix en Laravel. Comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n