{"id":24651,"date":"2021-05-23T11:16:00","date_gmt":"2021-05-23T08:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24651"},"modified":"2021-10-18T02:39:52","modified_gmt":"2021-10-17T23:39:52","slug":"so-installieren-und-verwenden-sie-den-tinymce-editor-in-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-installieren-und-verwenden-sie-den-tinymce-editor-in-laravel\/","title":{"rendered":"So installieren und verwenden Sie den TinyMCE-Editor in Laravel"},"content":{"rendered":"

In der Vergangenheit habe ich einen Artikel zur Verwendung von CKEditor in Laravel ver\u00f6ffentlicht<\/a>. In Bezug auf diesen Artikel baten viele Leser darum, den Beitrag zur Verwendung des TinyMCE-Editors in Laravel<\/strong> 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.<\/p>\n

Bei der Arbeit im Web m\u00fcssen 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\u00dflich HTML-Elementen geht. Hier sollten Sie Webtexteditoren verwenden<\/a>.<\/p>\n

TinyMCE und CKEditor sind beliebte Editoren. Es liegt an Ihnen, sich f\u00fcr eines zu entscheiden. Beide WYSIWYG-Editoren (What You See Is What You Get) sind leichtgewichtig und funktionieren perfekt f\u00fcr Webanwendungen.<\/p>\n

Der TinyMCE-Editor kann mit den eingeschr\u00e4nkten Tools kostenlos verwendet werden. Wenn Sie ihre Premium-Plugins verwenden m\u00f6chten, besuchen Sie bitte ihre Preisseite<\/a>.<\/p>\n

Installieren und verwenden Sie den TinyMCE-Editor in Laravel<\/h2>\n

Um den TinyMCE-Editor in Laravel zu integrieren, werde ich das npm-Paket f\u00fcr TinyMCE verwenden<\/a>. Laravel bietet integrierte Unterst\u00fctzung f\u00fcr npm. Alles, was Sie brauchen, um sicherzustellen, dass Node.js<\/a> auf Ihrem System installiert ist. \u00d6ffnen Sie das Terminal im Stammverzeichnis Ihres Projekts und f\u00fchren Sie den Befehl aus, um zuerst npm-Abh\u00e4ngigkeiten zu installieren.<\/p>\n

npm install<\/code><\/pre>\n
Danach installieren Sie TinyMCE mit npm mit dem Befehl:<\/p>\n
npm i tinymce<\/code><\/pre>\n
Wenn Sie fertig sind, gehen Sie zum Verzeichnis ’node_modules\/tinymce‘, und Sie sehen einige Dateien und Ordner. Wir m\u00fcssen einige davon kopieren und in das Verzeichnis ‚public‘ legen. \u00d6ffnen Sie dazu die webpack.mix.js<\/code>Datei und f\u00fcgen Sie den folgenden Code hinzu.<\/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
Im obigen Code verwenden wir die Funktion zum Kompilieren von Assets (Mix)<\/a> von Laravel.<\/p>\n
F\u00fchren Sie als n\u00e4chstes den Befehl aus, der Dateien und Ordner von ’node_modules\/tinymce‘ in das Verzeichnis ‚public‘ kopiert.<\/p>\n
npm run dev<\/code><\/pre>\n
Jetzt k\u00f6nnen wir den TinyMCE-Editor in der Blade-Datei verwenden. Binden Sie die tinymce.js<\/code>Datei ein und rufen Sie den Editor wie folgt auf.<\/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
Sie sollten jetzt den TinyMCE-Editor auf Ihrer Seite sehen, genau wie im folgenden Screenshot.<\/p>\n
Installieren Sie TinyMCE mit CDN<\/h2>\n
Bisher haben wir gesehen, wie man den TinyMCE-Editor mit npm installiert, was eine empfohlene Methode ist. Eine andere M\u00f6glichkeit, TinyMCE zu verwenden, ist CDN. Wenn Sie CDN verwenden, m\u00fcssen Sie keine Bibliotheksdateien auf Ihrem Server speichern. Es enth\u00e4lt direkt erforderliche Dateien von einem gehosteten Server.<\/p>\n
Der Benutzer kann TinyMCE \u00fcber CDN wie folgt verwenden.<\/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
Das ist es! Ich hoffe, Sie verstehen, wie Sie den TinyMCE-Editor in Laravel installieren und verwenden. Ich w\u00fcrde gerne Ihre Gedanken und Vorschl\u00e4ge im Kommentarbereich unten h\u00f6ren.<\/p>\n
Zum Thema passende Artikel<\/h3>\n