{"id":27761,"date":"2021-05-14T12:10:00","date_gmt":"2021-05-14T09:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27761"},"modified":"2021-10-17T17:08:47","modified_gmt":"2021-10-17T14:08:47","slug":"trix-un-editor-wysiwyg-de-codigo-abierto-para-sitios-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/trix-un-editor-wysiwyg-de-codigo-abierto-para-sitios-web\/","title":{"rendered":"Trix: un editor WYSIWYG de c\u00f3digo abierto para sitios web"},"content":{"rendered":"

Un editor de texto enriquecido o un editor WYSIWYG es \u00fatil para escribir contenido descriptivo que incluye elementos e im\u00e1genes HTML. En la etiqueta HTML textarea, no se puede escribir contenido con etiquetas HTML. Esta es la raz\u00f3n por la que la mayor\u00eda de los sitios web utilizan el editor HTML WYSIWYG.<\/p>\n

Trix<\/a> es un editor de texto enriquecido de c\u00f3digo abierto de Basecamp. Como se usa en Basecamp, millones de personas ya lo usan para escribir su contenido. En este art\u00edculo, estudiamos c\u00f3mo agregar el editor Trix en sus aplicaciones web.<\/p>\n

Instalaci\u00f3n<\/h3>\n

Trix aloj\u00f3 su paquete en GitHub<\/a> para que los usuarios puedan usar f\u00e1cilmente este agradable editor en sus aplicaciones web. Para comenzar, primero debe incluir archivos JS y CSS de Trix. Puede obtener estos archivos directamente dentro de la carpeta dist desde su p\u00e1gina de GitHub<\/a>. O bien, descargue su paquete y copie trix.js<\/code>y trix.css<\/code>archivos.<\/p>\n

Tambi\u00e9n necesita crear 2 archivos PHP y un archivo JS m\u00e1s. Veremos por qu\u00e9 y c\u00f3mo usar estos archivos en la parte posterior. La estructura de su carpeta debe ser la siguiente:<\/p>\n

\"Trix:<\/a><\/p>\n

Junto a agregar el editor Trix en su p\u00e1gina web, escriba el c\u00f3digo a continuaci\u00f3n.<\/p>\n

index.php<\/strong><\/p>\n

<link rel=\"stylesheet\" href=\"css\/trix.css\">\n<script src=\"js\/trix.js\"><\/script>\n<script src=\"js\/attachments.js\"><\/script>\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<trix-editor input=\"x\"><\/trix-editor>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form><\/code><\/pre>\n
En el c\u00f3digo anterior, agregamos archivos CSS y JS directamente. Por supuesto, debe seguir las pautas de su marco \/ CMS para incluir estos archivos.<\/p>\n
El editor de Trix agrega todo el contenido escrito al campo oculto que hemos agregado anteriormente. Y cuando env\u00ede el formulario, debe continuar con el campo oculto para obtener el contenido del editor. B\u00e1sicamente, obtendr\u00e1 el contenido del editor de Trix en el lado del servidor usando:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
De la misma manera, desea completar previamente el editor con el contenido y luego pasar el contenido en los atributos de valor del campo oculto. El editor de Trix rellena autom\u00e1ticamente el contenido de un elemento oculto.<\/p>\n
A continuaci\u00f3n, ejecute este archivo en su navegador y deber\u00eda ver su editor WYSIWYG en la p\u00e1gina.<\/p>\n
\"Trix:<\/a><\/p>\n
Cargar imagen en Trix WYSIWYG Editor<\/h3>\n
En la documentaci\u00f3n de GitHub, mencionaron el almacenamiento de archivos adjuntos.<\/p>\n
Trix acepta autom\u00e1ticamente archivos arrastrados o pegados en un editor y los inserta como archivos adjuntos en el documento. Cada archivo adjunto se considera pendiente hasta que lo almacene de forma remota y proporcione a Trix una URL permanente.<\/p>\n
Significa que debe tomar una imagen del editor, enviarla al servidor, cargar im\u00e1genes en el servidor y devolver la URL de la imagen. Para realizar este proceso vamos a escribir c\u00f3digo JS y PHP en los siguientes pasos.<\/p>\n
Primero, comencemos con el c\u00f3digo JS. Ha creado un attachments.js<\/code>archivo dentro del directorio ‘js’. Este archivo JS tendr\u00e1 el siguiente c\u00f3digo.<\/p>\n
(function() {\n\u00a0\u00a0\u00a0\u00a0var HOST = \"YOUR_DOMAIN_URL\/upload.php\"\n\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\n\u00a0\u00a0\u00a0\u00a0function uploadFileAttachment(attachment) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFile(attachment.file, setProgress, setAttributes)\n\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\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\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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.open(\"POST\", HOST, true)\n\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\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\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.send(formData)\n\u00a0\u00a0\u00a0\u00a0}\n\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})();<\/code><\/pre>\n
Reemplaza el marcador de posici\u00f3n "YOUR_DOMAIN_URL" con tu URL real. Lo que hace este c\u00f3digo es escuchar trix-attachment-add<\/code>eventos y enviar un archivo adjunto upload.php<\/code>. Al devolver la respuesta del servidor, establece la URL de la imagen permanente en los atributos del editor.<\/p>\n
Finalmente, escriba el c\u00f3digo de la imagen de carga en el upload.php<\/code>archivo.<\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'.$_FILES['file']['name']);\n\u00a0\necho \"YOUR_DOMAIN_URL\/uploads\/\".$_FILES['file']['name'];<\/code><\/pre>\n
Esperamos que comprenda c\u00f3mo agregar el editor Trix WYSIWYG usando PHP en su sitio web. Nos gustar\u00eda conocer su opini\u00f3n en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n