So installieren und verwenden Sie den TinyMCE-Editor in Laravel

Last updated 18. Oktober 2021

Inhalt

Installieren und verwenden Sie den TinyMCE-Editor in Laravel

In der Vergangenheit habe ich einen Artikel zur Verwendung von CKEditor in Laravel veröffentlicht. In Bezug auf diesen Artikel baten viele Leser darum, den Beitrag zur Verwendung des TinyMCE-Editors in Laravel zu schreiben. TinyMCE ist auch einer der beliebten WYSIWYG-HTML-Editoren wie CKEditor. In diesem Artikel untersuchen wir, wie der TinyMCE-Editor in der Laravel-Anwendung installiert und verwendet wird.

Bei der Arbeit im Web müssen wir manchmal lange Inhalte, Bilder und Rich Snippets in der Datenbank speichern. Dieser Inhalt kann eine Biografie, eine Produktzusammenfassung, ein Seiteninhalt usw. sein. Alle diese Formate erfordern die Verwendung verschiedener HTML-Tags. Das textarea-Tag von HTML ist nicht benutzerfreundlich, wenn es um das Schreiben von Inhalten einschließlich HTML-Elementen geht. Hier sollten Sie Webtexteditoren verwenden.

TinyMCE und CKEditor sind beliebte Editoren. Es liegt an Ihnen, sich für eines zu entscheiden. Beide WYSIWYG-Editoren (What You See Is What You Get) sind leichtgewichtig und funktionieren perfekt für Webanwendungen.

Der TinyMCE-Editor kann mit den eingeschränkten Tools kostenlos verwendet werden. Wenn Sie ihre Premium-Plugins verwenden möchten, besuchen Sie bitte ihre Preisseite.

Installieren und verwenden Sie den TinyMCE-Editor in Laravel

Um den TinyMCE-Editor in Laravel zu integrieren, werde ich das npm-Paket für TinyMCE verwenden. Laravel bietet integrierte Unterstützung für npm. Alles, was Sie brauchen, um sicherzustellen, dass Node.js auf Ihrem System installiert ist. Öffnen Sie das Terminal im Stammverzeichnis Ihres Projekts und führen Sie den Befehl aus, um zuerst npm-Abhängigkeiten zu installieren.

npm install

Danach installieren Sie TinyMCE mit npm mit dem Befehl:

npm i tinymce

Wenn Sie fertig sind, gehen Sie zum Verzeichnis ‘node_modules/tinymce’, und Sie sehen einige Dateien und Ordner. Wir müssen einige davon kopieren und in das Verzeichnis ‘public’ legen. Öffnen Sie dazu die webpack.mix.jsDatei und fügen Sie den folgenden Code hinzu.

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

Im obigen Code verwenden wir die Funktion zum Kompilieren von Assets (Mix) von Laravel.

Führen Sie als nächstes den Befehl aus, der Dateien und Ordner von ‘node_modules/tinymce’ in das Verzeichnis ‘public’ kopiert.

npm run dev

Jetzt können wir den TinyMCE-Editor in der Blade-Datei verwenden. Binden Sie die tinymce.jsDatei ein und rufen Sie den Editor wie folgt auf.

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

Sie sollten jetzt den TinyMCE-Editor auf Ihrer Seite sehen, genau wie im folgenden Screenshot.

Installieren Sie TinyMCE mit CDN

Bisher haben wir gesehen, wie man den TinyMCE-Editor mit npm installiert, was eine empfohlene Methode ist. Eine andere Möglichkeit, TinyMCE zu verwenden, ist CDN. Wenn Sie CDN verwenden, müssen Sie keine Bibliotheksdateien auf Ihrem Server speichern. Es enthält direkt erforderliche Dateien von einem gehosteten Server.

Der Benutzer kann TinyMCE über CDN wie folgt verwenden.

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

Das ist es! Ich hoffe, Sie verstehen, wie Sie den TinyMCE-Editor in Laravel installieren und verwenden. Ich würde gerne Ihre Gedanken und Vorschläge im Kommentarbereich unten hören.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net