{"id":27723,"date":"2021-05-23T11:20:00","date_gmt":"2021-05-23T08:20:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27723"},"modified":"2021-10-18T04:10:04","modified_gmt":"2021-10-18T01:10:04","slug":"como-instalar-e-usar-o-editor-tinymce-no-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-instalar-e-usar-o-editor-tinymce-no-laravel\/","title":{"rendered":"Como instalar e usar o Editor TinyMCE no Laravel"},"content":{"rendered":"

No passado, publiquei um artigo Como usar o CKEditor no Laravel<\/a>. Em refer\u00eancia a esse artigo, muitos leitores pediram para escrever um post sobre como usar o editor TinyMCE no Laravel<\/strong>. TinyMCE tamb\u00e9m \u00e9 um dos editores HTML WYSIWYG populares, como o CKEditor. Neste artigo, estudamos como instalar e usar o editor TinyMCE no aplicativo Laravel.<\/p>\n

Enquanto trabalhamos na web, \u00e0s vezes precisamos armazenar longos conte\u00fados, imagens e rich snippets no banco de dados. Este conte\u00fado pode ser uma biografia, resumo do produto, conte\u00fado da p\u00e1gina, etc. Todos esses formatos requerem o uso de tags HTML diferentes. A tag textarea do HTML n\u00e3o \u00e9 amig\u00e1vel quando se trata de escrever conte\u00fado, incluindo elementos HTML. \u00c9 aqui que voc\u00ea deve usar editores de texto da web<\/a>.<\/p>\n

TinyMCE e CKEditor s\u00e3o editores populares. Cabe a voc\u00ea escolher qualquer um. Ambos os editores WYSIWYG (o que voc\u00ea v\u00ea \u00e9 o que voc\u00ea obt\u00e9m) s\u00e3o leves e funcionam perfeitamente para aplicativos da web.<\/p>\n

O editor TinyMCE \u00e9 gratuito para usar com as ferramentas limitadas. Se algu\u00e9m deseja usar seus plug-ins premium, verifique sua p\u00e1gina de pre\u00e7os<\/a>.<\/p>\n

Instale e use o Editor TinyMCE no Laravel<\/h2>\n

Para integrar o editor TinyMCE no Laravel, vou usar o pacote npm para TinyMCE<\/a>. Laravel fornece suporte embutido para npm. Tudo que voc\u00ea precisa para ter certeza de que o Node.js<\/a> est\u00e1 instalado em seu sistema. Abra o terminal no diret\u00f3rio raiz do seu projeto e execute o comando para instalar as depend\u00eancias npm primeiro.<\/p>\n

npm install<\/code><\/pre>\n
Depois disso, instale o TinyMCE usando npm pelo comando:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Ap\u00f3s a conclus\u00e3o, se voc\u00ea for ao diret\u00f3rio ‘node_modules \/ tinymce’, ver\u00e1 alguns arquivos e pastas. Precisamos copiar alguns deles e coloc\u00e1-los dentro do diret\u00f3rio ‘p\u00fablico’. Para fazer isso, abra o webpack.mix.js<\/code>arquivo e adicione o c\u00f3digo abaixo nele.<\/p>\n
webpack.mix.js<\/strong><\/p>\n
....\n....\nmix.copyDirectory('node_modules\/tinymce\/icons', 'public\/node_modules\/tinymce\/icons');\nmix.copyDirectory('node_modules\/tinymce\/plugins', 'public\/node_modules\/tinymce\/plugins');\nmix.copyDirectory('node_modules\/tinymce\/skins', 'public\/node_modules\/tinymce\/skins');\nmix.copyDirectory('node_modules\/tinymce\/themes', 'public\/node_modules\/tinymce\/themes');\nmix.copy('node_modules\/tinymce\/jquery.tinymce.js', 'public\/node_modules\/tinymce\/jquery.tinymce.js');\nmix.copy('node_modules\/tinymce\/jquery.tinymce.min.js', 'public\/node_modules\/tinymce\/jquery.tinymce.min.js');\nmix.copy('node_modules\/tinymce\/tinymce.js', 'public\/node_modules\/tinymce\/tinymce.js');\nmix.copy('node_modules\/tinymce\/tinymce.min.js', 'public\/node_modules\/tinymce\/tinymce.min.js');<\/code><\/pre>\n
No c\u00f3digo acima, estamos usando o recurso Compiling Assets (Mix)<\/a> do Laravel.<\/p>\n
Em seguida, execute o comando que copia arquivos e pastas de ‘node_modules \/ tinymce’ para o diret\u00f3rio ‘public’.<\/p>\n
npm run dev<\/code><\/pre>\n
Agora estamos prontos para usar o editor TinyMCE no arquivo blade. Inclua o tinymce.js<\/code>arquivo e chame o editor da seguinte maneira.<\/p>\n
<textarea class=\"description\" name=\"description\"><\/textarea>\n<script src=\"{{ asset('node_modules\/tinymce\/tinymce.js') }}\"><\/script>\n<script>\n\u00a0\u00a0\u00a0\u00a0tinymce.init({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0selector:'textarea.description',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 900,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
Agora voc\u00ea deve ver o editor TinyMCE em sua p\u00e1gina, como a imagem abaixo.<\/p>\n
Instale TinyMCE usando CDN<\/h2>\n
At\u00e9 agora, vimos como instalar o editor TinyMCE usando npm, que \u00e9 uma forma recomendada. Outra maneira de usar o TinyMCE \u00e9 por meio do CDN. Usando o CDN, voc\u00ea n\u00e3o precisa manter os arquivos da biblioteca em seu servidor. Inclui diretamente os arquivos necess\u00e1rios de um servidor hospedado.<\/p>\n
O usu\u00e1rio pode usar o TinyMCE por meio do CDN da seguinte maneira.<\/p>\n
<textarea class=\"description\" name=\"description\"><\/textarea>\n<script src=\"https:\/\/cloud.tinymce.com\/stable\/tinymce.min.js\"><\/script>\n<script>\n\u00a0\u00a0\u00a0\u00a0tinymce.init({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0selector:'textarea.description',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 900,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 300\n\u00a0\u00a0\u00a0\u00a0});\n<\/script><\/code><\/pre>\n
\u00c9 isso! Espero que voc\u00ea entenda como instalar e usar o editor TinyMCE no Laravel. Eu gostaria de ouvir seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h3>\n