ویرایشگر Ckeditor همراه با پلاگین easy image

آیا شما cloudServices خود ckeditor رو دارید که میخواید از تنظمیاتش استفاده کنید ؟

@hesammousavi
سلام - نه ندارم .یعنی حتما باید داشته باشی تا از این پلاگین easy image استفاده کنیم؟
یک سوال دیگر هم دارم من وقتی می خوام یک عکسی رو داخل این ادیتور اپلود کنم تصویره میاد ولی اول میگه که تصویر با موفقیت اپلود شد بعدش یک ارور 500 هم بهم میده .وقتی هم که میرم ببینم که تصویر اپلپد شده تو دایرکتوری public , میبینم نشده. وقتی که تو بلید لاراول متن همون مقاله رو میزنم تا نشون بده خبری از عکس نیست.همه ی کارها رو طبق خود مستندات اون انجام دادم این هم کد اپلود کردن با روت post:

//blade laravel
                                <label for="images" class="control-label">Article Image</label>
                                <input type="file" class="form-control @error('images') is-invalid @enderror" name="images" id="images" placeholder="Enter Image" value="{{ old('image') }}">

                                    @error('images')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror  

@section('script-ckeditor')
    <script src="/ckeditor_4.14.0_full_easyimage/ckeditor/ckeditor.js"></script>
    <script>
        CKEDITOR.replace( 'body' ,{     
            filebrowserBrowseUrl: '/admin/upload-images',
            filebrowserUploadUrl: '/admin/upload-images',
        });     
    </script>
@endsection
//web.php with prefix 'admin'
    Route::post('/upload-images','AdminController@uploadImageCkeditor')->name('upload');

//middleware verifyCsrf
    protected $except = [
        '/admin/upload-images'
    ];
//controller
    public function uploadImageCkeditor(Request $request)
    {
        $this->validate($request, [
            'images' => 'required|mimes:jpeg,png,bmp,jpg'
        ]);

        $fileName = $file->getClientOriginalName();
        $year = Carbon::now()->year;
        $imagePath = "/assets/img/Article-imagesInNotes/{$year}/{$fileName}/";               
        $file->move(public_path($imagePath),$fileName);

        //$CKEditorFuncNum = $request->input('CKEditorFuncNum');
        $msg = 'Image uploaded successfully';
        $imageUrl = $imagePath . $fileName;
        //@header('Content-type: text/html; charset=utf-8'); 
        return  "<script>window.parent.CKEDITOR.tools.callFunction(1, '$url', '$msg')</script>";        
    }
//my error
error 500

آقای @Saeeed یک گفتگو در همین رابطه مطرح کرده بودند و به پاسخ رسیدند از ایشون کمک بگیرید

سلام خدمت همه دوستان .
آقای رضوی درست یادم نیست ، ولی فکر میکنم بعدا به مشکلات بیشتری برخورد کردم که از خیر ckeditor گذشتم .
پیشنهاد من الان froala editor یا markdown ادیتور های اوپن سورس هست.
از froala editor راضی هستم ، فقط یه سری لایسنس داره که با css میشه مخفی کرد. خیلی هم کامله.
@heather @hesammousavi @hossein.r.1442 @ali.bayat
فقط اگر یکبار دوستان یه گفتگو ویژه ایجاد کنن و همه تجربیاتشون رو بگن که مسئله برای یبار حل بشه خیلی خوبه.
ممنون از همه.

@hesammousavi
@Saeeed
@hossein.r.1442
@ali.bayat
خیلی ممنون از همتون الان کدوم بهتره و راحتتره؟ برای اینکه کاربر بیاد یک عکس انتخواب کنه برای avatar و resize بشه کدوم بهتره؟ سردرگم شدم نمیدونم از کدوم استفاده کنم.واسه لاراول

برای avatar که شما نیازی به ckeditor ندارید، کتابخونه های جیکوئری و جاوااسکریپت زیادی هستند برای مدیریت avatar کاربر

@Saeeed
سلام اقای سعید...من یک مشکلی با اپلود کردن عکس این text-editor که گفتین froala دارم .این کدهای من هستش:
من وقتی رو ایکون عکس کلیک میکنم دروپ عکس می زنم ارور می گیرم ولی brows میزنم ارور نمیده . این هیچی فقظ من وقتی عکسو میارم اصلا منو نمیفرسته به کنترلر مورد نظر حداقل ببینم فایل ه میره یا نه.خلاصه سردرگم شدم لطفا بهم بگین کلا چکار کنم .تو انترنت گشتم ولی همین بود فقط اپشن هاشو زیادتر کرده بودند...

//blade
                                    <textarea rows="5" class="form-control @error('body') is-invalid @enderror" name="body" id="body" placeholder="Enter Body"></textarea>

@section('script')
    <script src="{{ asset('froala_editor_3.1.0/js/froala_editor.pkgd.min.js') }}"></script>
    <script>
         new FroalaEditor( '#body',{
            imageUploadURL: "{{ route('uploadImage') }}",

         });        
    </script>
@endsection

//route
    Route::post('/upload-images','AdminController@uploadImageCkeditor')->name('uploadImage');
//verifyCsrfMiddleware
    protected $except = [
        '/admin/upload-images'
    ];
//controller
    public function uploadImage(Request $request)
    {
        dd($request->file('file'));
    }

حقیقتا من مارک داون رو بیشتر میپسندم

خیلی راحت میشه با VueJs یه ادیتور کوچیک ساخت که عملکردهای مارک داون رو قرار بده
چیزی شبیه به همین سیستم راکت

@ali.bayat
سلام ..ممنون از شما
میشه بیشتر توضیح بدین - یه لینکم بهم بدین که ججوری پیاده سازیش کنم

یه کامپوننت VueJs میسازید مثلا Editor
یه Toolbar درش قرار میدید برای icon ها
و یه Textarea

بعد باید Event ها رو هندل کنی و عملیاتها رو انجام بدی (مثلا با کلیک روی B باید ۲ تا ستاره در هر سمت متن سلکت شده قرار بدی و ...)

برای نمایش میتونی از مثال خود ویو استفاده کنی:
https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?from-embed

این پکیج هر بررسی کنید:
https://madewithvuejs.com/tiptap-renderless-rich-text-editor-for-vue-js