آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6
چگونه لاگ کردن در OkHttp را فعال کنیم؟
7 بهمن 1398
آموزش Caching یا کش کردن داده ها با رتروفیت در اندروید
1 اسفند 1398
آموزش استفاده از ckeditor در لاراول 6، در این پست از وب سایت تجاری اپ شما نحوه استفاده از ckeditor همراه با آپلود عکس در لاراول را خواهید آموخت. شما برای نصب ckeditor در laravel 6 و آپلود تصویر در ckeditor با Laravel 6 باید 4 مرحله یا گام زیر را دنبال کنید.
ما از تابع filebrowseruploadurl و filebrowserUploadMethod از ckeditor در Laravel استفاده خواهیم کرد.
در این پست به صورت گام به گام در قالب یک مثال خیلی ساده نحوه آپلود عکس با لاراول در ckeditor را به شما آموزش خواهیم داد تا شما به راحتی بتوانید از آن در پروژه های لاراول خود استفاده کنید. Ckeditor یک ویرایشگر متن قدرتمند است. بنابراین اگر گزینه آپلود تصویر نیز در دسترس باشد یا قابل استفاده باشد بسیار جذاب خواهد شد.
آموزش استفاده از ckeditor همراه با آپلود تصویر در لاراول 6
در ادامه می توانید مراحل نحوه استفاده از ckeditor همراه با آپلود عکس در Laravel را مشاهده نمایید.
گام اول: افزودن مسیرها یا Routes
ابتدا ما نیاز داریم دو مسیر یا route ایجاد کنیم یکی برای یک برای نمایش صفحه فرم ckeditor و دیگری برای بارگذاری یا آپلود تصویر.بنابراین برای ایجاد این دو مسیر کدهای زیر را به فایل routes/web.php اضافه کنید:
routes/web.php
Route::get('ckeditor', 'CkeditorController@index');
Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');
گام دوم: ایجاد کنترلر Controller
در این مرحله ما یک کنترلر جدید با نام 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 با نام 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
در این مرحله پوشه “images” را در دایرکتوری public خود ایجاد می کنیم .
اکنون می توانید با دستور زیر برنامه خود را اجرا کنید و نحوه استفاده از ckeditor همراه با آپلود عکس در لاراول را مشاهده نمایید.
php artisan serve
آدرس یا URL زیر را در مرورگر خود باز کنید.
همچنین بخوانید: رسم نمودار در لاراول با کتابخانه Highcharts
http://localhost:8000/ckeditor
امیدوارم آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6 برای شما مفید بوده باشد…
2 Comments
عالی بود
مختصر و مفید
عالی بود
از همین آموزش رفتم جلو و توی سایتی که دارم روش کار میکنم قرار دادم
مرسی از شما