Como instalar e usar o Editor TinyMCE no Laravel

No passado, publiquei um artigo Como usar o CKEditor no Laravel. Em referência a esse artigo, muitos leitores pediram para escrever um post sobre como usar o editor TinyMCE no Laravel. TinyMCE também é um dos editores HTML WYSIWYG populares, como o CKEditor. Neste artigo, estudamos como instalar e usar o editor TinyMCE no aplicativo Laravel.

Enquanto trabalhamos na web, às vezes precisamos armazenar longos conteúdos, imagens e rich snippets no banco de dados. Este conteúdo pode ser uma biografia, resumo do produto, conteúdo da página, etc. Todos esses formatos requerem o uso de tags HTML diferentes. A tag textarea do HTML não é amigável quando se trata de escrever conteúdo, incluindo elementos HTML. É aqui que você deve usar editores de texto da web.

TinyMCE e CKEditor são editores populares. Cabe a você escolher qualquer um. Ambos os editores WYSIWYG (o que você vê é o que você obtém) são leves e funcionam perfeitamente para aplicativos da web.

O editor TinyMCE é gratuito para usar com as ferramentas limitadas. Se alguém deseja usar seus plug-ins premium, verifique sua página de preços.

Instale e use o Editor TinyMCE no Laravel

Para integrar o editor TinyMCE no Laravel, vou usar o pacote npm para TinyMCE. Laravel fornece suporte embutido para npm. Tudo que você precisa para ter certeza de que o Node.js está instalado em seu sistema. Abra o terminal no diretório raiz do seu projeto e execute o comando para instalar as dependências npm primeiro.

npm install

Depois disso, instale o TinyMCE usando npm pelo comando:

npm i tinymce

Após a conclusão, se você for ao diretório ‘node_modules / tinymce’, verá alguns arquivos e pastas. Precisamos copiar alguns deles e colocá-los dentro do diretório ‘público’. Para fazer isso, abra o webpack.mix.jsarquivo e adicione o código abaixo nele.

webpack.mix.js

....
....
mix.copyDirectory('node_modules/tinymce/icons', 'public/node_modules/tinymce/icons');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/node_modules/tinymce/plugins');
mix.copyDirectory('node_modules/tinymce/skins', 'public/node_modules/tinymce/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/node_modules/tinymce/themes');
mix.copy('node_modules/tinymce/jquery.tinymce.js', 'public/node_modules/tinymce/jquery.tinymce.js');
mix.copy('node_modules/tinymce/jquery.tinymce.min.js', 'public/node_modules/tinymce/jquery.tinymce.min.js');
mix.copy('node_modules/tinymce/tinymce.js', 'public/node_modules/tinymce/tinymce.js');
mix.copy('node_modules/tinymce/tinymce.min.js', 'public/node_modules/tinymce/tinymce.min.js');

No código acima, estamos usando o recurso Compiling Assets (Mix) do Laravel.

Em seguida, execute o comando que copia arquivos e pastas de ‘node_modules / tinymce’ para o diretório ‘public’.

npm run dev

Agora estamos prontos para usar o editor TinyMCE no arquivo blade. Inclua o tinymce.jsarquivo e chame o editor da seguinte maneira.

<textarea class="description" name="description"></textarea>
<script src="{{ asset('node_modules/tinymce/tinymce.js') }}"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

Agora você deve ver o editor TinyMCE em sua página, como a imagem abaixo.

Instale TinyMCE usando CDN

Até agora, vimos como instalar o editor TinyMCE usando npm, que é uma forma recomendada. Outra maneira de usar o TinyMCE é por meio do CDN. Usando o CDN, você não precisa manter os arquivos da biblioteca em seu servidor. Inclui diretamente os arquivos necessários de um servidor hospedado.

O usuário pode usar o TinyMCE por meio do CDN da seguinte maneira.

<textarea class="description" name="description"></textarea>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea.description',
        width: 900,
        height: 300
    });
</script>

É isso! Espero que você entenda como instalar e usar o editor TinyMCE no Laravel. Eu gostaria de ouvir seus pensamentos e sugestões na seção de comentários abaixo.

Artigos relacionados

• Trix – um editor WYSIWYG de código aberto para sites
• Crie um site multilíngue em PHP usando o Laravel Framework
• Como usar o recurso de conexões múltiplas de banco de dados do Laravel em um site