Hur man installerar och använder TinyMCE Editor i Laravel

Senaste uppdateringen okt 17, 2021

Innehåll

Installera och använd TinyMCE Editor i Laravel

Tidigare har jag publicerat en artikel Hur man använder CKEditor i Laravel. Med hänvisning till den artikeln bad många läsare att skriva inlägget om hur man använder TinyMCE-redigeraren i Laravel. TinyMCE är också en av de populära WYSIWYG HTML-redigerarna som CKEditor. I den här artikeln studerar vi hur man installerar och använder TinyMCE-redigeraren i Laravel-applikationen.

När vi arbetar på webben behöver vi ibland lagra långt innehåll, bilder och rich snippets i databasen. Detta innehåll kan vara en biografi, produktöversikt, sidinnehåll etc. Alla dessa format kräver att du använder olika HTML-taggar. Textarea-taggen för HTML är inte användarvänlig när det gäller att skriva innehåll inklusive HTML-element. Det är här du bör använda webbtextredigerare.

TinyMCE och CKEditor är populära redaktörer. Det är upp till dig att välja någon. Båda WYSIWYG (vad du ser är vad du får) redaktörer är lätta och fungerar perfekt för webbapplikationer.

TinyMCE-redigeraren är gratis att använda med de begränsade verktygen. Om man vill använda sina premium-plugins, vänligen kolla deras prissida.

Installera och använd TinyMCE Editor i Laravel

För att integrera TinyMCE-redaktören i Laravel ska jag använda npm-paketet för TinyMCE. Laravel tillhandahåller inbyggt stöd för npm. Allt du behöver för att säkerställa att Node.js är installerat på ditt system. Öppna terminalen i din projektrotkatalog och kör kommandot för att installera npm-beroenden först.

npm install

Efter detta installerar du TinyMCE med npm med kommandot:

npm i tinymce

När du är klar, om du går över till katalogen ‘node_modules / tinymce’ kommer du att se några filer och mappar. Vi måste kopiera några av dem och placera dem i den "offentliga" katalogen. För att göra det, öppna webpack.mix.jsfilen och lägg till koden nedan i den.

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

I ovanstående kod använder vi funktionen Compiling Assets (Mix) i Laravel.

Kör sedan kommandot som kopierar filer och mappar från ‘node_modules / tinymce’ till ‘public’ -katalogen.

npm run dev

Nu är vi redo att använda TinyMCE-redigeraren i bladfilen. Inkludera tinymce.jsfilen och ring redaktören enligt följande.

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

Du bör nu se TinyMCE-redigeraren på din sida precis som skärmdumpen nedan.

Installera TinyMCE med CDN

Hittills har vi sett hur man installerar TinyMCE-redigeraren med hjälp av npm, vilket är ett rekommenderat sätt. Ett annat sätt att använda TinyMCE är via CDN. Med hjälp av CDN behöver du inte behålla biblioteksfiler på din server. Den innehåller direkt nödvändiga filer från en värdserver.

Användaren kan använda TinyMCE via CDN enligt följande.

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

Det är allt! Jag hoppas att du förstår hur du installerar och använder TinyMCE-redigeraren i Laravel. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net