✅ Notizie, temi, plugin WEB e WordPress. Qui condividiamo suggerimenti e le migliori soluzioni per siti web.

Come installare e utilizzare TinyMCE Editor in Laravel

100

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

Fonte di registrazione: artisansweb.net

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More