Come installare e utilizzare TinyMCE Editor in Laravel

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

Mentre si lavora sul Web, a volte è necessario archiviare contenuti lunghi, immagini e rich snippet nel database. Questo contenuto può 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 è user-friendly quando si tratta di scrivere contenuti che includono elementi HTML. Qui è dove dovresti usare gli editor di testo web.

TinyMCE e CKEditor sono editor popolari. Sta a te scegliere uno dei due. Entrambi gli editor WYSIWYG (quello che vedi è ciò che ottieni) sono leggeri e funzionano perfettamente per le applicazioni web.

L’editor TinyMCE è gratuito con gli strumenti limitati. Se si desidera utilizzare i propri plugin premium, si prega di controllare la loro pagina dei prezzi.

Installa e usa TinyMCE Editor in Laravel

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

npm install

Dopo questo installa TinyMCE usando npm con il comando:

npm i tinymce

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ò, apri il webpack.mix.jsfile e aggiungi il codice seguente.

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

Nel codice sopra, stiamo usando la funzione Compiling Assets (Mix) di Laravel.

Quindi, esegui il comando che copia file e cartelle da ‘node_modules/tinymce’ alla directory ‘public’.

npm run dev

Ora siamo pronti per utilizzare l’editor TinyMCE nel file blade. Includere il tinymce.jsfile e chiamare l’editor come segue.

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

Ora dovresti vedere l’editor TinyMCE sulla tua pagina proprio come lo screenshot qui sotto.

Installa TinyMCE usando CDN

Finora abbiamo visto come installare l’editor TinyMCE usando npm che è un modo consigliato. Un altro modo per utilizzare TinyMCE è tramite CDN. Utilizzando CDN, non è necessario conservare i file della libreria sul server. Include direttamente i file richiesti da un server ospitato.

L’utente può utilizzare TinyMCE tramite CDN come segue.

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

Questo è 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.

articoli Correlati

• Trix: un editor WYSIWYG open source per siti Web
• Crea un sito Web multilingue in PHP utilizzando Laravel Framework
• Come utilizzare la funzionalità di connessioni multiple di database di Laravel su un sito Web?