نصب و راهندازی ویرایشگر CKEditor

@Saeeed
سلام
سال نو مبارک
آقا من میخوام همین فرایند آپلود عکس رو توی react و توسط api انجام بدم.
حدودا یک هفته هست دهنم صاف شده ! اگر راه حلی پیدا کردی لطفا به منم بگو ! ممنون

@mohammadali7293 @ali.farmani @mo.hoseiin99 @hossein.r.1442 @ghomi2018 @Ali.Abbasi1381 @raminr77 @ali.bayat @hesammousavi @elyasbeshkani @mohsenbostan @juza66
سلام خدمت همه دوستان سال نو مبارک .
می خوام تمام چیزی که تا الان درباره ckeditor و esay image فهمیدم به اشتراک بذارم ، و امیدوارم دوستان هم راهنمایی کنن و تجربیات خودشون رو به اشتراک بذارن.

بببنید اولا من روش های مختلف دانلود ckeditor رو امتخان کردم ، یه روش اینه که افزونه ها و ویجت ها رو به صورت دستی به ckeditor اضافه کنید ، که در این صورت خیلی دردسر داره و باید وابستگی های اون رو هم به صورت دستی دانلود و نصب کنید ، مثلا من esay image
رو به صورت دستی نصب کردم و حدود یک ساعت فقط داشتم ارور رفع میکردم و در نهایت به اروری برخوردم که اصلا نتونستم حلش کنم و ..

یه روش دیگه اینه که ار بلیدر و creator انلاین استفاده کنید ، در این حالت وقتی پکیجی به ادیتور خودتون اضافه میکید وابستگی های خودش رو هم اضافه میکنه . در این حالت من esay image رو اضافه کردم ولی بازهم به ارور برخورد کردم و این افزونه اصلا فعال نشد.
تنها حالتی که من تست کردم و تونستم از esay image استفاده کنم ، این بود که فول پکیج آنلاین رو با قابلیت esay دانلود کنم ، که به درستی افزونه برام فعال شد. , و از این لینک گرفتم:

https://ckeditor.com/ckeditor-4/download/

و با کد زیر تونستم راهندازی کنم البته اصلا به کانفیگ دست نزدم :

 CKEDITOR.replace('post_body', {
            height :'300',
            fontSize_defaultLabel : '18px',
            filebrowserUploadUrl: '{{route('StorePostImg', ['_token' => csrf_token() ])}}',
            filebrowserImageUploadUrl: '{{route('StorePostImg', ['_token' => csrf_token() ])}}',
            filebrowserUploadMethod: 'form',
            language: 'fa'
        });

با فرستادن token به این صورت اصلا به مشکل csrf token هم برخورد نکردم.
در ضمن روت ای هم که برای آپلود عکس در نظر گرفتم به این صورت بود:

        Route::post('/store-img','PostController@ImgStore')->name('StorePostImg');

و در کنتلر هم به شکلی خیلی عادی و تابعی که خودم نوشته بودم فایل دریافتی آپلود کردم :

$this->validate(request(), [
            'upload' => 'required|mimes:jpeg,png,bmp,gif'
        ]);
       $path =  Utility::uploadFile($request->file('upload'));

حالا در این مرحله یک موضوع وجود داره و اون هم این است که باید response به چه صورت باشه ، من دو نوع خروجی رو امتحان کردم یکی این که روش معمول هست :

echo "<script>window.parent.CKEDITOR.tools.callFunction(1, '{$path}', '')</script>";

من از این روش برای کار با esay image جواب نگرفتم و خروجی رو نادرست میدونست.
البته یه سرچ کردم و با کد زیر تونستم به خوبی آدرس فایل آپلود شده رو برگردونم :

 return response()->json([ 'fileName' => 'your file name put here', 'uploaded' => true, 'url' => $path]);

که برای اطلاعات بیشتر میتونید به آدرس بیشتر رجوع کنید :

https://stackoverflow.com/questions/51892652/upload-image-to-ckeditor-in-laravel-incorrect-server-response

خب در این مرحله دیگه مشکلی نداشتم و فایل هم آپلود میشه و هم در ادیتور نمایش داده میشه.

اما یه مشکل که بهش برخوردم اینه که وقتی محتوای ذخیره شده رو نمایش میدم ، همه چی به خوبی نمایش داده میشه بجز عکسی که آپلود شده ، من با کد زیر محتوا رو نمایش میدم :

<div class="row mt-3">
            <div class="col-12">
                {!! $post->body !!}
            </div>
        </div>

و خروجی هست ولی عکسی که با esay image آپلود شده نمایش داده نمیشه .

البته یه خروجی هست و یه تگ img هم میاد ولی عکس نمایش داده نمیشه ، خروجی اینه :

<figure class="easyimage easyimage-side">
        <img alt="" src="blob:http://localhost:8000/4d5a6989-9c01-4f62-bd1e-c224ad29b144" width="2400">  
        <figcaption></figcaption>
</figure>

الان این عکس به درستی آپلود شده ولی نمیدونم چرا نمایش داده نمیشه و اینکه اصلا چرا با یه تگ ساده نمایش داده نمیشه.
ممنون میشم دوستان راهنمایی کنن

اصلاحیه : دوستان شرمنده مشکل نمایش عکس حل ، این بخاطر این بود که من عکس رو در پابلیک آپلود میکردم ، در حالی که آدرس رو ناقص به ckeditor میفرستادم خروجی باید با تابع public_path() باشه.

البته دوستان به نکته ای هم برخوردم و این هست که روش ارسال response به شکل زیر هم درست هست و در واقع داخل مستندات ckeditor هم این روش رو برای ارسال response نوشته :

 $response = [
            'uploaded'=>1,
            'fileName'=>'sss',
            'url'=>public_path($path)
        ];
       return $response;

البته در راکت هم مطرح شده که از لینک زیر میتونید دقیق تر متوجه موضوع بشید :

https://roocket.ir/discuss/incorrect-server-response-%D8%AF%D8%B1-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-CKEDITOR

پس نتیجه گرفتم که دو روش زیر برای ارسال پاسخ درست هست و برای esay image هم جواب میده :

 $response = [
            'uploaded'=>1,
            'fileName'=>'sss',
            'url'=>public_path($path)
        ];
       return $response; 

        return response()->json([ 'fileName' => 'your file name put here', 'uploaded' => true, 'url' => public_path($path)]);

ممنون از همه

اون تابع آپلود که نوشتی یه مشکلی داره یعنی محتوای درست رو بر نمیگردونه شما باید دقیقا آدرس آپلود به همراه نام فایل رو برگردونی
اگه میشه کد تابع آپلود رو بذار

@hossein.r.1442
اقای رضوی ممنون مشکل حل شد، درست میفرمایید باید آدرس رو به صورت کامل بفرسته و تابع باید اصلاح بشه .
ممنون از راهنمایی شما .
کد تابع

public static function uploadFile( $file, $prefix = 'uploads' ) {

        $day    = Carbon::now()->day;
        $year   = Carbon::now()->year;
        $month  = Carbon::now()->month;
        $folder = "$prefix/$year/$month/$day";
        $image1 =  uniqid().$file->getClientOriginalName();
        $path1  = $folder . '/'. $image1;
        if ( file_exists( $folder ) == false ) {
            $fs = new Filesystem();
            $fs->makeDirectory( $folder, 0755, true );
        }
        $file->move($folder, $image1);

        return "/" . $path1;

    }