چگونه لاگ کردن در OkHttp را فعال کنیم؟
چگونه لاگ کردن در OkHttp را فعال کنیم؟
2020-01-27
آموزش Caching یا کش کردن داده ها با رتروفیت در اندروید
آموزش Caching یا کش کردن داده ها با رتروفیت در اندروید
2020-02-20
آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

آموزش استفاده از 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;
        }
    }
}

گام سوم: ایجاد فایل 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>

گام چهارم: ایجاد پوشه images

در این مرحله پوشه “images” را در دایرکتوری public خود ایجاد می کنیم .

اکنون می توانید با دستور زیر برنامه خود را اجرا کنید و نحوه استفاده از ckeditor همراه با آپلود عکس در لاراول را مشاهده نمایید.

php artisan serve

آدرس یا URL زیر را در مرورگر خود باز کنید.

http://localhost:8000/ckeditor

امیدوارم آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6 برای شما مفید بوده باشد…

1 Comment

  1. مجید گفت:

    عالی بود
    مختصر و مفید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *