{"id":27383,"date":"2021-05-14T12:27:00","date_gmt":"2021-05-14T09:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27383"},"modified":"2021-10-18T04:14:31","modified_gmt":"2021-10-18T01:14:31","slug":"trix-um-editor-wysiwyg-de-codigo-aberto-para-sites","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/trix-um-editor-wysiwyg-de-codigo-aberto-para-sites\/","title":{"rendered":"Trix – um editor WYSIWYG de c\u00f3digo aberto para sites"},"content":{"rendered":"

Um editor de rich text ou editor WYSIWYG \u00e9 \u00fatil para escrever conte\u00fado descritivo que inclui elementos HTML e imagens. Na tag textarea HTML, n\u00e3o se pode escrever conte\u00fado com tags HTML. \u00c9 por isso que a maioria dos sites usa o editor de HTML WYSIWYG.<\/p>\n

Trix<\/a> \u00e9 um editor de rich text de c\u00f3digo aberto da Basecamp. Como \u00e9 usado no Basecamp, milh\u00f5es de pessoas j\u00e1 o usam para escrever seu conte\u00fado. Neste artigo, estudamos como adicionar o editor Trix em seus aplicativos da web.<\/p>\n

Instala\u00e7\u00e3o<\/h3>\n

A Trix hospedou seu pacote no GitHub<\/a> para que os usu\u00e1rios possam usar facilmente este bom editor em seus aplicativos da web. Para come\u00e7ar, primeiro voc\u00ea precisa incluir os arquivos JS e CSS do Trix. Voc\u00ea pode obter esses arquivos diretamente dentro da pasta dist na p\u00e1gina do GitHub<\/a>. Ou ent\u00e3o, baixe seu pacote e copie trix.js<\/code>e trix.css<\/code>arquivos.<\/p>\n

Voc\u00ea tamb\u00e9m precisa criar 2 arquivos PHP e mais um arquivo JS. Veremos por que e como usar esses arquivos na parte posterior. Sua estrutura de pastas deve ser a seguinte:<\/p>\n

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

Em seguida, para adicionar o editor Trix em sua p\u00e1gina da web, escreva o c\u00f3digo abaixo.<\/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
No c\u00f3digo acima, adicionamos arquivos CSS e JS diretamente. Obviamente, voc\u00ea deve seguir as diretrizes de sua estrutura \/ CMS para incluir esses arquivos.<\/p>\n
O editor Trix anexa todo o conte\u00fado escrito ao campo oculto que adicionamos acima. E ao enviar o formul\u00e1rio, voc\u00ea deve prosseguir com o campo oculto para obter o conte\u00fado do editor. Basicamente, voc\u00ea obter\u00e1 o conte\u00fado do editor Trix no lado do servidor usando:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
Da mesma forma, voc\u00ea deseja preencher previamente o editor com o conte\u00fado e, em seguida, passar o conte\u00fado nos atributos de valor do campo oculto. O editor Trix preenche automaticamente o conte\u00fado de um elemento oculto.<\/p>\n
Em seguida, execute este arquivo em seu navegador e voc\u00ea dever\u00e1 ver seu editor WYSIWYG na p\u00e1gina.<\/p>\n
\"Trix<\/a><\/p>\n
Carregar imagem no editor Trix WYSIWYG<\/h3>\n
Na documenta\u00e7\u00e3o do GitHub, eles mencionaram sobre o armazenamento de arquivos anexados.<\/p>\n
O Trix aceita automaticamente os arquivos arrastados ou colados em um editor e os insere como anexos no documento. Cada anexo \u00e9 considerado pendente at\u00e9 que voc\u00ea o armazene remotamente e forne\u00e7a ao Trix um URL permanente.<\/p>\n
Isso significa que voc\u00ea precisa pegar uma imagem do editor, envi\u00e1-la para o servidor, fazer upload das imagens no servidor e retornar ao URL da imagem. Para realizar este processo, iremos escrever c\u00f3digo JS e PHP nas pr\u00f3ximas etapas.<\/p>\n
Primeiro, vamos come\u00e7ar com o c\u00f3digo JS. Voc\u00ea criou um attachments.js<\/code>arquivo dentro do diret\u00f3rio ‘js’. Este arquivo JS ter\u00e1 o seguinte 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
Substitua o espa\u00e7o reservado ‘YOUR_DOMAIN_URL’ pelo seu URL real. O que esse c\u00f3digo faz \u00e9 escutar o trix-attachment-add<\/code>evento e enviar um anexo ao upload.php<\/code>arquivo. Ao retornar a resposta do servidor, ele define o URL da imagem permanente nos atributos do editor.<\/p>\n
Finalmente, escreva o c\u00f3digo da imagem de upload no upload.php<\/code>arquivo.<\/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 voc\u00ea entenda como adicionar o editor Trix WYSIWYG usando PHP em seu site. Gostar\u00edamos de ouvir sua opini\u00e3o na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n