Cómo instalar y usar TinyMCE Editor en Laravel

En el pasado, publiqué un artículo Cómo usar CKEditor en Laravel. En referencia a ese artículo, muchos lectores pidieron escribir la publicación sobre cómo usar el editor TinyMCE en Laravel. TinyMCE es también uno de los editores HTML WYSIWYG populares como CKEditor. En este artículo, estudiamos cómo instalar y usar el editor TinyMCE en la aplicación Laravel.

Mientras trabajamos en la web, a veces necesitamos almacenar contenido extenso, imágenes y fragmentos enriquecidos en la base de datos. Este contenido puede ser una biografía, resumen de producto, contenido de página, etc. Todos estos formatos requieren que uses diferentes etiquetas HTML. La etiqueta textarea de HTML no es fácil de usar cuando se trata de escribir contenido, incluidos elementos HTML. Aquí es donde debe utilizar los editores de texto web.

TinyMCE y CKEditor son editores populares. Depende de usted elegir cualquiera. Ambos editores WYSIWYG (lo que ves es lo que obtienes) son livianos y funcionan perfectamente para aplicaciones web.

El editor TinyMCE es de uso gratuito con las herramientas limitadas. Si desea utilizar sus complementos premium, consulte su página de precios.

Instalar y usar TinyMCE Editor en Laravel

Para integrar el editor TinyMCE en Laravel, voy a usar el paquete npm para TinyMCE. Laravel proporciona soporte integrado para npm. Todo lo que necesita para asegurarse de que Node.js esté instalado en su sistema. Abra la terminal en el directorio raíz de su proyecto y ejecute el comando para instalar las dependencias npm primero.

npm install

Después de esto, instale TinyMCE usando npm con el comando:

npm i tinymce

Al finalizar, si se dirige al directorio ‘node_modules / tinymce’, verá algunos archivos y carpetas. Necesitamos copiar algunos de ellos y colocarlos dentro del directorio ‘público’. Para hacerlo, abra el webpack.mix.jsarchivo y agregue el siguiente código.

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');

En el código anterior, estamos usando la función de compilación de activos (mezcla) de Laravel.

A continuación, ejecute el comando que copia archivos y carpetas de ‘node_modules / tinymce’ al directorio ‘público’.

npm run dev

Ahora estamos listos para usar el editor TinyMCE en el archivo blade. Incluya el tinymce.jsarchivo y llame al editor de la siguiente manera.

<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>

Ahora debería ver el editor TinyMCE en su página como en la captura de pantalla siguiente.

Instale TinyMCE usando CDN

Hasta ahora hemos visto cómo instalar el editor TinyMCE usando npm, que es una forma recomendada. Otra forma de utilizar TinyMCE es a través de CDN. Con CDN, no necesita mantener archivos de biblioteca en su servidor. Incluye directamente los archivos necesarios de un servidor alojado.

El usuario puede usar TinyMCE a través de CDN de la siguiente manera.

<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>

¡Eso es! Espero que entiendas cómo instalar y usar el editor TinyMCE en Laravel. Me gustaría escuchar sus pensamientos y sugerencias en la sección de comentarios a continuación.

Artículos relacionados

• Trix: un editor WYSIWYG de código abierto para sitios web
• Cree un sitio web en varios idiomas en PHP usando Laravel Framework
• Cómo utilizar la función de conexiones de múltiples bases de datos de Laravel en un sitio web