راکت
حل شده

استفاده از ckeditor

10 پاسخ

سلام و عرض ادب
وقتتون بخیر
بنده در استفاده از 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\PanelController@UploadImageSubject');

    بعد در قسمت 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>";

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

ایمان
ایمان
@iman
ثبت پرسش جدید

پاسخ‌ها

10
حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

بهترین پاسخ

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

KraToS
KraToS
@hkratos7

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

    return $response;

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

مهدی سمیعیان
مهدی سمیعیان
@mahdidev

تخصص: برنامه نویس وب/اندروید

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

شاید پاسخ شما همین‌جا باشد

TBF tec
TBF tec
@tbf5005

@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

تخصص: برنامه نویس وب/اندروید

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

بهزاد میرزازاده
بهزاد میرزازاده
@mirzazadehbehzad

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

مهدی سمیعیان
مهدی سمیعیان
@mahdidev

تخصص: برنامه نویس وب/اندروید

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

مهدی سمیعیان
مهدی سمیعیان
@mahdidev

تخصص: برنامه نویس وب/اندروید

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

سلام آفرین مشکل همین بود حالا وقتی بدون اینترنت پوشه ckeditor رو و افزونه file browser رو اضافه میکنیم وقتی میخواهیم عکس آپلود کنیم دیگه صفحه آپلود ckeditor نمیاد و مستقیم صفحه آپلود ویندوز بالا میاد و عکسی هم نمیشه آپلود کرد چیکار کنیم ؟

b.nik
b.nik
@b.nik

تخصص: آزاد

اقای رنجبر شما باید اینو به صورت پرسش مطرح کنید چون 4 سال از این سوال میگذره

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

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