آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6
آموزش استفاده از ckeditor در لاراول 6، در این پست از وب سایت تجاری اپ شما نحوه استفاده از ckeditor همراه با آپلود عکس در لاراول را خواهید آموخت. شما برای نصب ckeditor در laravel 6 و آپلود تصویر در ckeditor با Laravel 6 باید 4 مرحله یا گام زیر را دنبال کنید.
ما از تابع filebrowseruploadurl و filebrowserUploadMethod از ckeditor در Laravel استفاده خواهیم کرد.
در این پست به صورت گام به گام در قالب یک مثال خیلی ساده نحوه آپلود عکس با لاراول در ckeditor را به شما آموزش خواهیم داد تا شما به راحتی بتوانید از آن در پروژه های لاراول خود استفاده کنید. Ckeditor یک ویرایشگر متن قدرتمند است. بنابراین اگر گزینه آپلود تصویر نیز در دسترس باشد یا قابل استفاده باشد بسیار جذاب خواهد شد.
در ادامه می توانید مراحل نحوه استفاده از ckeditor همراه با آپلود عکس در Laravel را مشاهده نمایید.
ابتدا ما نیاز داریم دو مسیر یا route ایجاد کنیم یکی برای یک برای نمایش صفحه فرم ckeditor و دیگری برای بارگذاری یا آپلود تصویر.بنابراین برای ایجاد این دو مسیر کدهای زیر را به فایل routes/web.php اضافه کنید:
routes/web.php
Route::get('ckeditor', 'CkeditorController@index'); Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');
در این مرحله ما یک کنترلر جدید با نام CkeditorController ایجاد می کنیم و سپس متدهای index() و upload() را به آن اضافه می کنیم. متد index عمل return یا برگشت دادن view را برای ما انجام می دهد و در متد upload کدهای مربوط به آپلود عکس را خواهیم نوشت.
app/Http/Controllers/CkeditorController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class CkeditorController extends Controller { /** * success response method. * * @return \Illuminate\Http\Response */ public function index() { return view('ckeditor'); } public function upload(Request $request) { if($request->hasFile('upload')) { $originName = $request->file('upload')->getClientOriginalName(); $fileName = pathinfo($originName, PATHINFO_FILENAME); $extension = $request->file('upload')->getClientOriginalExtension(); $fileName = $fileName.'_'.time().'.'.$extension; $request->file('upload')->move(public_path('images'), $fileName); $CKEditorFuncNum = $request->input('CKEditorFuncNum'); $url = asset('images/'.$fileName); $msg = 'تصویر با موفقیت بارگذاری شد.'; $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>"; @header('Content-type: text/html; charset=utf-8'); echo $response; } } }
همچنین بخوانید: آموزش ایمپورت و اکسپورت کردن فایل اکسل و csv در لاراول 6
در این مرحله ما یک فایل Blade با نام ckeditor.blade.php ایجاد می کنیم و کدهای مربوط به فرم و ckeditor js را در آن وارد می کنیم :
resources/views/ckeditor.blade.php
<!DOCTYPE html> <html lang="fa-IR"> <head> <title>آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6 - تجاری اپ</title> <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script> <style> body { direction: rtl; text-align: right; } h1 { font-size: 22px; } </style> </head> <body> <h1>آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6 - تجاری اپ</h1> <textarea name="editor1"></textarea> <script> CKEDITOR.replace('editor1', { language: 'fa', content: 'fa', filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}", filebrowserUploadMethod: 'form' }); </script> </body> </html>
همچنین بخوانید: آموزش ساخت پنل ادمین با لاراول با استفاده از voyager
در این مرحله پوشه “images” را در دایرکتوری public خود ایجاد می کنیم .
اکنون می توانید با دستور زیر برنامه خود را اجرا کنید و نحوه استفاده از ckeditor همراه با آپلود عکس در لاراول را مشاهده نمایید.
php artisan serve
آدرس یا URL زیر را در مرورگر خود باز کنید.
همچنین بخوانید: رسم نمودار در لاراول با کتابخانه Highcharts
http://localhost:8000/ckeditor
امیدوارم آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6 برای شما مفید بوده باشد…
2 Comments
عالی بود
مختصر و مفید
عالی بود
از همین آموزش رفتم جلو و توی سایتی که دارم روش کار میکنم قرار دادم
مرسی از شما