ایمان
4 سال پیش توسط ایمان مطرح شد
8 پاسخ

استفاده از ckeditor

سلام و عرض ادب
وقتتون بخیر
بنده در استفاده از ckeditor به مشکل برخوردم
البته مشکل من لود خود ckeditor نیست.

  1. بنده از وبسایت رسمی این گروه، نسخه 4.9.2 رو دانلود کردم.
  2. فولدر ckeditor رو در فولدر public از پروژه لاراول قرار دادم.
  3. آی دی textarea مربوطه رو انتخاب کردم و ckeditor رو فراخوانی کردم.
    به صورت زیر :

    <script src="/ckeditor/ckeditor.js"></script>
    <script>
        CKEDITOR.replace('body' ,{
            filebrowserUploadUrl : '/admin/panel/upload-image',
            filebrowserImageUploadUrl :  '/admin/panel/upload-image',
        });
    </script>

    تا اینجای کار به خوبی پیش رفت، و من نتیجه رو دیدم و ckeditor به درستی بارگذاری شد.
    مشکل از جایی شروع شد که خواستم از درون ckeditor عکسی آپلود کنم و استفاده کنم.
    طبق یکی از آموزش های همین سایت به صورت زیر عمل کردم:
    ابتدا route مورد نظر رو ایجاد کردم، به صورت زیر:

    $this->post('/admin/panel/upload-image', 'Admin\[email protected]');

    بعد در قسمت Middleware ها و فایل VerifyCsrfToken.php کد زیر رو قرار دادم:

    protected $except = [
        'admin/panel/upload-image'
    ];

    بعد تابع زیر رو در controller مربوطه ایجاد کردم. تابع uploadImageSubject در کنترلر PanelController

    public function uploadImageSubject()
    {
    
        $this->validate(request() , [
            'upload' => 'required|mimes:jpeg,png,bmp',
        ]);
    
        $year = Carbon::now()->year;
        $imagePath = "/upload/images/{$year}/";
    
        $file = request()->file('upload');
        $filename = $file->getClientOriginalName();
    
        if(file_exists(public_path($imagePath) . $filename)) {
            $filename = Carbon::now()->timestamp . $filename;
        }
    
        $file->move(public_path($imagePath) , $filename);
        $url = $imagePath . $filename;
    
        return "<script>window.parent.CKEDITOR.tools.callFunction(1 , '{$url}' , '')</script>";
    }

    توقع داشتم خیلی خوب پیش بره، البته سعی کردم دیباگ کنم، متوجه شدم، وقتی بارگذاری عکس رو انجام میدم، عکس بارگذاری میشه، ولی پاسخی به ckeditor فرستاده نمیشه، سعی کردم در اول همین تابع کد زیر رو قرار بدم تا متوجه بشم مشکل از کجاست:

    return request()->all();

    متوجه شدم در ویدویی که آقای سیدی قرار دادن: هنگام برگشت دادن اطلاعات ckeditor، اطلاعات زیر برگشت داده میشن:
    CKEditor
    CKEditorFuncNum
    ckCsrfToken
    langCode
    upload
    اما برای بنده فقط اطلاعات زیر برگشت داده میشه
    ckCsrfToken
    upload
    متذکر بشم تصویر به درستی در مسیری که مشخص کردم آپلود میشه، ولی به طبق چیزی که در بالا ذکر کردم، اطلاعات درستی از ckeditor برگشت داده نمیشه که من بخوام کد زیر رو بهش پاس بدم

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

مشکل از کجاست و باید چکار کنم؟


لاراول
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
nodejs
html_css
vuejs
وردپرس
پایتون
فلاتر
css
react
اندروید
ثبت پرسش جدید
حسام موسوی
تخصص: طراح و برنامه نویس @hesammousavi 4 سال پیش مطرح شد
0

با سلام همونطور که در سمت نظرات گفتید بدلیل تغییر ورژن این مشکل براتون بوجود اومده یعنی در ورژن 4.9.2 این مشکل رو داشتید که با جا به جا کردن فایل ckeditor با فایل پروژه ای که در اختیارتون گذاشتم مشکل حل شد .
حالا چون ورژن ckeditor به کلی تغییر کرده . باید مستندات این پلاگین رو در لینک زیر مطالعه کنید یجورایی روش آپلود هم برای این ویرایشگر تغییر کرده
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html


KraToS
@hkratos7 4 سال پیش مطرح شد
5

@gharaeeim
به جای کدی که آقای موسوی گفتن این کد رو جایگزین کنین :
$response = [
"uploaded" => 1,
"filename" => $fileName,
"url" => $url,
"error" => ''
];

    return $response;

نوع توابعی که باید برگشت بدین تغییر کرده تو ورژن جدید تر


مهدی
تخصص: برنامه نویس وب/اندروید @mahdidev 4 سال پیش مطرح شد
0

سلام منم توی پیاده سازی ادیتور به مشکل خوردم که امیدوارم با این روشها که گذاشتید حل بشه


TBF tec
@tbf5005 3 سال پیش آپدیت شد
2

@mahdidev
@gharaeeim

سلام .
من حدود 2 ساعت وقت گذاشتم و بالاخره تونستم از داخل مستندات CKEditor متوجه تغییرش بشم .
مشکل از اینجاست که شما در جایی که اسکریپت خودتون رو فراخوانی میکنید ، باید یک خط دیگه هم اضافه کنید و متد form رو بهش پاس بدید .
یعنی این خط( 'filebrowserUploadMethod : form' ) رو باید اضافه کنید
در کل میشه این :

    <script>
                CKEDITOR.replace( 'body', {
                    filebrowserUploadMethod : 'form',
                    filebrowserUploadUrl: '/admin/panel/upload-image',
                    filebrowserImageUploadUrl: '/admin/panel/upload-image',
            });
        </script>

مهدی
تخصص: برنامه نویس وب/اندروید @mahdidev 3 سال پیش مطرح شد
0

آپلود تصاویر به صورت لوکال درست انجام می شه ولی بعد از اینکه پروژه رو روی هاست منتشر کردم تصاویر اصلا آپلود نمیشن. مشکل چیه؟
@tbf5005


بهزاد میرزازاده
@mirzazadehbehzad 2 سال پیش مطرح شد
0

سلام منم چند بار به این مشکلات برخوردم دو تا لینک ذیل رو مطالعه کنید و مشکلاتتون رو برای همیشه حل کنید
https://jobteam.ir/ProductUser/45-Laravel-file-manager
https://jobteam.ir/ProductUser/83-ckeditor-get-Document-Position


مهدی
تخصص: برنامه نویس وب/اندروید @mahdidev 2 سال پیش مطرح شد
0

@tbf5005
@mirzazadehbehzad
آپلود تصویر داخل ادیتور به خوبی انجام میشه و توی پست منتشر شده هم به خوبی نمایش داده میشه. ولی وقتی میخوام پست رو ویرایش کنم عکس درست نمایش داده نمیشه.
یعنی توی قسمت src آدرس روت اصلی پروژه درج نمیشه. چطوری میشه این مورد رو حل کرد؟


مهدی
تخصص: برنامه نویس وب/اندروید @mahdidev 2 سال پیش مطرح شد
0

متوجه شدم که اشکال از فارسی کردن آدرس تصویر هست. یعنی وقتی داخل ادیتور میخواد تصویری که قبلا آپلود کردم رو نمایش بده اگه عدد توی آدرس باشه به صورت فارسی عدد رو توی قسمت src درج می کنه که باعث میشه تصویر توی ادیتور درست نمایش داده نشه.
برای اینکه این اتفاق نیفته چه راهی وجود داره؟


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام