{"id":28240,"date":"2021-05-23T11:05:00","date_gmt":"2021-05-23T08:05:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28240"},"modified":"2021-10-17T16:49:42","modified_gmt":"2021-10-17T13:49:42","slug":"como-instalar-y-usar-tinymce-editor-en-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-instalar-y-usar-tinymce-editor-en-laravel\/","title":{"rendered":"C\u00f3mo instalar y usar TinyMCE Editor en Laravel"},"content":{"rendered":"

En el pasado, publiqu\u00e9 un art\u00edculo C\u00f3mo usar CKEditor en Laravel<\/a>. En referencia a ese art\u00edculo, muchos lectores pidieron escribir la publicaci\u00f3n sobre c\u00f3mo usar el editor TinyMCE en Laravel<\/strong>. TinyMCE es tambi\u00e9n uno de los editores HTML WYSIWYG populares como CKEditor. En este art\u00edculo, estudiamos c\u00f3mo instalar y usar el editor TinyMCE en la aplicaci\u00f3n Laravel.<\/p>\n

Mientras trabajamos en la web, a veces necesitamos almacenar contenido extenso, im\u00e1genes y fragmentos enriquecidos en la base de datos. Este contenido puede ser una biograf\u00eda, resumen de producto, contenido de p\u00e1gina, etc. Todos estos formatos requieren que uses diferentes etiquetas HTML. La etiqueta textarea de HTML no es f\u00e1cil de usar cuando se trata de escribir contenido, incluidos elementos HTML. Aqu\u00ed es donde debe utilizar los editores de texto web<\/a>.<\/p>\n

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.<\/p>\n

El editor TinyMCE es de uso gratuito con las herramientas limitadas. Si desea utilizar sus complementos premium, consulte su p\u00e1gina de precios<\/a>.<\/p>\n

Instalar y usar TinyMCE Editor en Laravel<\/h2>\n

Para integrar el editor TinyMCE en Laravel, voy a usar el paquete npm para TinyMCE<\/a>. Laravel proporciona soporte integrado para npm. Todo lo que necesita para asegurarse de que Node.js<\/a> est\u00e9 instalado en su sistema. Abra la terminal en el directorio ra\u00edz de su proyecto y ejecute el comando para instalar las dependencias npm primero.<\/p>\n

npm install<\/code><\/pre>\n
Despu\u00e9s de esto, instale TinyMCE usando npm con el comando:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Al finalizar, si se dirige al directorio ‘node_modules \/ tinymce’, ver\u00e1 algunos archivos y carpetas. Necesitamos copiar algunos de ellos y colocarlos dentro del directorio ‘p\u00fablico’. Para hacerlo, abra el webpack.mix.js<\/code>archivo y agregue el siguiente c\u00f3digo.<\/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
En el c\u00f3digo anterior, estamos usando la funci\u00f3n de compilaci\u00f3n de activos (mezcla)<\/a> de Laravel.<\/p>\n
A continuaci\u00f3n, ejecute el comando que copia archivos y carpetas de ‘node_modules \/ tinymce’ al directorio ‘p\u00fablico’.<\/p>\n
npm run dev<\/code><\/pre>\n
Ahora estamos listos para usar el editor TinyMCE en el archivo blade. Incluya el tinymce.js<\/code>archivo y llame al editor de la siguiente manera.<\/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
Ahora deber\u00eda ver el editor TinyMCE en su p\u00e1gina como en la captura de pantalla siguiente.<\/p>\n
Instale TinyMCE usando CDN<\/h2>\n
Hasta ahora hemos visto c\u00f3mo instalar el editor TinyMCE usando npm, que es una forma recomendada. Otra forma de utilizar TinyMCE es a trav\u00e9s de CDN. Con CDN, no necesita mantener archivos de biblioteca en su servidor. Incluye directamente los archivos necesarios de un servidor alojado.<\/p>\n
El usuario puede usar TinyMCE a trav\u00e9s de CDN de la siguiente manera.<\/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
\u00a1Eso es! Espero que entiendas c\u00f3mo instalar y usar el editor TinyMCE en Laravel. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h3>\n