{"id":24538,"date":"2021-05-20T11:09:00","date_gmt":"2021-05-20T08:09:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24538"},"modified":"2021-10-18T02:40:38","modified_gmt":"2021-10-17T23:40:38","slug":"so-installieren-und-verwenden-sie-ckeditor-in-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-installieren-und-verwenden-sie-ckeditor-in-laravel\/","title":{"rendered":"So installieren und verwenden Sie CKEditor in Laravel"},"content":{"rendered":"

M\u00f6chten Sie CKEditor in Laravel installieren? CKEditor ist ein WYSIWYG (What you see is what you get) HTML-Editor, mit dem wir Rich-Text-Formate schreiben k\u00f6nnen. In diesem Artikel zeige ich Ihnen, wie Sie CKEditor in Laravel installieren und verwenden<\/strong>.<\/p>\n

Warum m\u00fcssen Sie CKEditor verwenden?<\/h3>\n

Der Rich-Text-Editor ist erforderlich, um Rich Content f\u00fcr Ihre Seiten oder Artikel zu schreiben. Auf der Webseite ben\u00f6tigen wir verschiedene Elemente wie Bilder, Abs\u00e4tze, Links usw. All diese verschiedenen Elemente k\u00f6nnen mit dem CKEditor hinzugef\u00fcgt werden.<\/p>\n

HTML bietet ein Textarea-Element zum Schreiben einer Beschreibung. Aber es kommt mit Einschr\u00e4nkungen. In textarea ist es nicht einfach und benutzerfreundlich, andere HTML-Elemente wie p, div, img usw.<\/p>\n

Um solche Einschr\u00e4nkungen zu \u00fcberwinden, k\u00f6nnen Sie CKEditor verwenden, der selbst ein Rich-Text-Editor ist. Unser endg\u00fcltiger Editor sieht wie im folgenden Screenshot aus.<\/p>\n

\"So<\/a><\/p>\n

Installieren Sie CKEditor in Laravel<\/h3>\n

Es gibt 2 M\u00f6glichkeiten, CKEditor in Laravel zu installieren \u2013 CDN oder CKEditor-Paket. Sie k\u00f6nnen beide Ressourcen von ihrer Download-<\/a> Seite herunterladen<\/a>.<\/p>\n

CDN-Link ist \/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js<\/code>. Wenn Sie sich f\u00fcr CDN entscheiden, m\u00fcssen Sie nichts von der CKEditor-Website herunterladen.<\/p>\n

Wenn Sie es ohne CDN installieren m\u00f6chten, laden Sie das Paket herunter (Standardpaket empfohlen). Als n\u00e4chstes erstellen Sie einen Ordner ‚ckeditor‘ im Verzeichnis ‚public‘ Ihres Laravel-Projekts. Und in diesen ‚ckeditor‘-Ordner kopieren Sie unten Dateien und Ordner aus dem heruntergeladenen Paket.<\/p>\n

\"So<\/a><\/p>\n

So verwenden Sie CKEditor<\/h3>\n

In diesem Stadium haben Sie die Schritte zur Installation des CKEditor-Pakets abgeschlossen. Sehen wir uns nun an, wie Sie den CKEditor verwenden.<\/p>\n

Nehmen wir an, Sie haben einen ‚Textbereich‘, der von CKEditor ersetzt werden soll. Dazu f\u00fcge ich die ID ’summary-ckeditor‘ zum ‚textarea‘ hinzu.<\/p>\n

<textarea class=\"form-control\" id=\"summary-ckeditor\" name=\"summary-ckeditor\"><\/textarea><\/code><\/pre>\n
Als n\u00e4chstes m\u00fcssen Sie eine ckeditor.js<\/code>Datei einf\u00fcgen und einen JavaScript-Code schreiben, der ‚textarea‘ durch CKEditor ersetzt.<\/p>\n
<script src=\"{{ asset('ckeditor\/ckeditor.js') }}\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
Der obige JavaScript-Code ersetzt textarea durch den CKEditor. Wenn Sie CDN verwenden m\u00f6chten, lautet der obige Code wie folgt:<\/p>\n
<script src=\"\/\/cdn.ckeditor.com\/4.14.0\/standard\/ckeditor.js\"><\/script>\n<script>\nCKEDITOR.replace( 'summary-ckeditor' );\n<\/script><\/code><\/pre>\n
F\u00fchren Sie Ihre Seite im Browser aus und Sie sollten jetzt den CKeditor sehen k\u00f6nnen. Sie k\u00f6nnen nun Ihre Inhalte zum Editor hinzuf\u00fcgen und auf Ihrer Website verwenden.<\/p>\n
Bild in CKEditor hochladen und einf\u00fcgen<\/h3>\n
CKEditor bietet standardm\u00e4\u00dfig keine Option zum Hochladen des Bildes. Wenn jemand diese Option anbieten m\u00f6chte, lesen Sie diesen Artikel weiter. Es muss eine Laravel-Route hinzuf\u00fcgen, einen Code f\u00fcr das Hochladen von Bildern und etwas JavaScript zu Ihrer Anwendung schreiben. Um die Bild-Upload-Option zu aktivieren, m\u00fcssen Sie zun\u00e4chst CKEditor wie folgt aufrufen.<\/p>\n
<script>\nCKEDITOR.replace( 'summary-ckeditor', {\n\u00a0\u00a0\u00a0\u00a0filebrowserUploadUrl: \"{{route('upload', ['_token' => csrf_token() ])}}\",\n\u00a0\u00a0\u00a0\u00a0filebrowserUploadMethod: 'form'\n});\n<\/script><\/code><\/pre>\n
Hier habe filebrowserUploadUrl<\/code>ich f\u00fcr den Schl\u00fcssel die Routen-URL und das csrf-Token \u00fcbergeben. Lassen Sie uns die Route ‚upload‘ definieren.<\/p>\n
Route::post('ckeditor\/image_upload', 'CKEditorController@upload')->name('upload');<\/code><\/pre>\n
Seite aktualisieren. Wenn Sie nun auf das Bildsymbol von CKEditor klicken, sehen Sie die unten gezeigte Bild-Upload-Option.<\/p>\n
\"So<\/a><\/p>\n
Um das hochgeladene Bild in CKEditor zu verwenden, m\u00fcssen Sie das Bild in Ihren Anwendungsordner hochladen und eine Bild-URL zur\u00fccksenden. Um ein Bild auf einem Server zu speichern, verwende ich die Laravel-Speicherfunktion. Zuerst muss ich also einen Symlink eines Ordners "Speicher" erstellen. F\u00fchren Sie den folgenden Befehl aus, um einen Symlink zu erstellen:<\/p>\n
php artisan storage:link<\/code><\/pre>\n
Unsere Route ‚Upload‘-Karte mit der Upload-Methode von CKEditorController<\/code>. Erstellen Sie also einen Controller CKEditorController<\/code>und definieren Sie die upload<\/code>Methode darin wie folgt:<\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\n\u00a0\nclass CKEditorController extends Controller\n{\n\u00a0\u00a0\u00a0\u00a0public function upload(Request $request)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($request->hasFile('upload')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename with extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenamewithextension = $request->file('upload')->getClientOriginalName();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get filename without extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/get file extension\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$extension = $request->file('upload')->getClientOriginalExtension();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/filename to store\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$filenametostore = $filename.'_'.time().'.'.$extension;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Upload File\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$request->file('upload')->storeAs('public\/uploads', $filenametostore);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$CKEditorFuncNum = $request->input('CKEditorFuncNum');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$url = asset('storage\/uploads\/'.$filenametostore);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$msg = 'Image successfully uploaded';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$re = \"<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')<\/script>\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Render HTML output\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0@header('Content-type: text\/html; charset=utf-8');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $re;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Versuchen Sie nun, das Bild aus der integrierten Bildoption von CKEditor hochzuladen, und Sie erhalten das Bild in Ihrem Editor hinzugef\u00fcgt.<\/p>\n
Ich hoffe, Sie verstehen, wie Sie CKEditor in Laravel installieren und verwenden. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge im Kommentar unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n