{"id":24879,"date":"2021-05-23T11:38:00","date_gmt":"2021-05-23T08:38:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24879"},"modified":"2021-10-18T03:11:09","modified_gmt":"2021-10-18T00:11:09","slug":"come-installare-e-utilizzare-tinymce-editor-in-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-installare-e-utilizzare-tinymce-editor-in-laravel\/","title":{"rendered":"Come installare e utilizzare TinyMCE Editor in Laravel"},"content":{"rendered":"

In passato, ho pubblicato un articolo How to use CKEditor in Laravel<\/a>. In riferimento a quell’articolo, molti lettori hanno chiesto di scrivere il post su come utilizzare l’ editor TinyMCE in Laravel<\/strong>. TinyMCE \u00e8 anche uno dei popolari editor HTML WYSIWYG come CKEditor. In questo articolo, studiamo come installare e utilizzare l’editor TinyMCE nell’applicazione Laravel.<\/p>\n

Mentre si lavora sul Web, a volte \u00e8 necessario archiviare contenuti lunghi, immagini e rich snippet nel database. Questo contenuto pu\u00f2 essere una biografia, un riepilogo del prodotto, il contenuto della pagina, ecc. Tutti questi formati richiedono l’utilizzo di tag HTML diversi. Il tag textarea dell’HTML non \u00e8 user-friendly quando si tratta di scrivere contenuti che includono elementi HTML. Qui \u00e8 dove dovresti usare gli editor di testo web<\/a>.<\/p>\n

TinyMCE e CKEditor sono editor popolari. Sta a te scegliere uno dei due. Entrambi gli editor WYSIWYG (quello che vedi \u00e8 ci\u00f2 che ottieni) sono leggeri e funzionano perfettamente per le applicazioni web.<\/p>\n

L’editor TinyMCE \u00e8 gratuito con gli strumenti limitati. Se si desidera utilizzare i propri plugin premium, si prega di controllare la loro pagina dei prezzi<\/a>.<\/p>\n

Installa e usa TinyMCE Editor in Laravel<\/h2>\n

Per integrare l’editor TinyMCE in Laravel, user\u00f2 il pacchetto npm per TinyMCE<\/a>. Laravel fornisce supporto integrato per npm. Tutto ci\u00f2 di cui hai bisogno per assicurarti che Node.js<\/a> sia installato sul tuo sistema. Apri il terminale nella directory principale del tuo progetto ed esegui il comando per installare prima le dipendenze npm.<\/p>\n

npm install<\/code><\/pre>\n
Dopo questo installa TinyMCE usando npm con il comando:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Al termine, se vai alla directory ‘node_modules\/tinymce’ vedrai alcuni file e cartelle. Dobbiamo copiarne alcuni e inserirli nella directory ‘public’. Per fare ci\u00f2, apri il webpack.mix.js<\/code>file e aggiungi il codice seguente.<\/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
Nel codice sopra, stiamo usando la funzione Compiling Assets (Mix)<\/a> di Laravel.<\/p>\n
Quindi, esegui il comando che copia file e cartelle da ‘node_modules\/tinymce’ alla directory ‘public’.<\/p>\n
npm run dev<\/code><\/pre>\n
Ora siamo pronti per utilizzare l’editor TinyMCE nel file blade. Includere il tinymce.js<\/code>file e chiamare l’editor come segue.<\/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
Ora dovresti vedere l’editor TinyMCE sulla tua pagina proprio come lo screenshot qui sotto.<\/p>\n
Installa TinyMCE usando CDN<\/h2>\n
Finora abbiamo visto come installare l’editor TinyMCE usando npm che \u00e8 un modo consigliato. Un altro modo per utilizzare TinyMCE \u00e8 tramite CDN. Utilizzando CDN, non \u00e8 necessario conservare i file della libreria sul server. Include direttamente i file richiesti da un server ospitato.<\/p>\n
L’utente pu\u00f2 utilizzare TinyMCE tramite CDN come segue.<\/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
Questo \u00e8 tutto! Spero che tu capisca come installare e utilizzare l’editor TinyMCE in Laravel. Mi piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h3>\n