مشکل در کار با CKEditor در ویو جی اس

- 2 روز پیش
توسط Ashkan Nazari آپدیت شد
Ali Ghaleyan ( 3585 تجربه )
6 روز پیش

سلام خدمت دوستان
من از کامپوننت ckeditor در vue js استفاده میکنم و فعلا دو مورد هست که قصد انجامش رو دارم و متاسفانه در انجامشون به مشکل خوردم
یکی اینکه ckeditor به صورت rtl باشه وقتی که صفحه لود میشه
و دوم اپلود تصویر هستش که هیچ چیز ازش دستگیرم نشده و اگر اطلاعی دارید ازش ممنون میشم از صفر اپلود تصویرش رو بگید
برای rtl کردن این کردهارو اعمال کردم

<ckeditor :editor="editor" :config="configEditor" v-model="product.description"></ckeditor>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

editor: ClassicEditor,
                configEditor:{
                    contentsLangDirection:'rtl',

                }
بهترین پاسخ انتخاب شده توسط Ali Ghaleyan
Ashkan Nazari
2 روز پیش

سلام. منم چند روزی هست با این ادیتور درگیرم ولی این چیزی که شما میخواید رو حل کردم.DecoupledEditor با کد زیرنصب میشه
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document
برای راست چین کردن یا چپ چین کردن به div که editor توشه dir دلخواه بده یا برو توی ادیتوری که import کردی dir رو پیدا کن و تغییر بده.

<template>  
<div dir="ltr" class="col-xl-9 text-left col-md-9">  
<ckeditor lan="fa" id="emailText" :editor="editor" [@ready](https://roocket.ir/@ready)="onReady" v-model="emailText"  
:config="editorConfig"></ckeditor>  
<div>  
</template>  
<script>  
import DecoupledEditor from '[@ckeditor](https://roocket.ir/@ckeditor)/ckeditor5-build-decoupled-document';  
export default {  
name: "MailSend",  
data() {  
return {  
editor: DecoupledEditor,  
editorConfig: {  
ckfinder: {  
uploadUrl: '[https://mySite/image/ckUpload?command=QuickUpload&type=Files&responseType=json](https://mySite/image/ckUpload?command=QuickUpload&type=Files&responseType=json)',  
},  
},  
emailText: '',  
}  
},  
mounted(){  
},  
methods: {  
onReady(editor) {  
// Insert the toolbar before the editable area.  
editor.ui.getEditableElement().parentElement.insertBefore(  
editor.ui.view.toolbar.element,  
editor.ui.getEditableElement()  
);  
},  
}  
}  
</script>

کد سمت سرور(با فریم ورک لاراول هست اما میتونی بفهمی منظورم رو) :

 /**
     * @param Request $request
     * @return string
     * @throws ValidationException
     */
    public function ckUpload(Request $request)
    {
        $this->validate($request, [
            'upload' => ['required', 'image']
        ]);

        try {
            $file = $request->upload;
            $path = str_replace('local/public/', '', public_path('/img/ckeditor'));
            $name = round(microtime(true) * 1000) . '-' . rand(100000, 999999) . '.';
            //Display File Mime Type
            $fileMimeType = $file->getMimeType();
            $name = $name . str_after($fileMimeType, '/');

            $file->move(($path), $name);

            return  response()->json(['fileName'=>$name,'uploaded'=>1,'url'=>'https://mysite/img/ckeditor/' . $name],200);        } catch (\Exception $exception) {
           return httpStatusCode::status500();
        }
    }
mahdi khanzadi ( 7542 تجربه )
5 روز پیش

برای اپلود تصاویر و کلا کار با فایل فایل منیجر KCfinder رو به ادیتور اظافه کنید.
درون پوشه cke edior یه فایل با نام config.js هست اونو باز کنید و تنظیمات زیر رو داخلش کپی کنید:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    //config.language = 'fa';

    config.contentsLangDirection = 'rtl';

    // Simplify the dialog windows.
    //config.removeDialogTabs = 'image:advanced;link:advanced';

    config.filebrowserUploadMethod = 'form';
    config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
    config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
    config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';
    config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
    config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
    config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';

};
Ali Ghaleyan ( 3585 تجربه )
5 روز پیش

@khanzadimahdi
دوست عزیز از راهنماییت ممنونم اما من با ویو جی اس کار میکنم
داخل سوال نمونه کدش هست

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

سلام. منم چند روزی هست با این ادیتور درگیرم ولی این چیزی که شما میخواید رو حل کردم.DecoupledEditor با کد زیرنصب میشه
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document
برای راست چین کردن یا چپ چین کردن به div که editor توشه dir دلخواه بده یا برو توی ادیتوری که import کردی dir رو پیدا کن و تغییر بده.

<template>  
<div dir="ltr" class="col-xl-9 text-left col-md-9">  
<ckeditor lan="fa" id="emailText" :editor="editor" [@ready](https://roocket.ir/@ready)="onReady" v-model="emailText"  
:config="editorConfig"></ckeditor>  
<div>  
</template>  
<script>  
import DecoupledEditor from '[@ckeditor](https://roocket.ir/@ckeditor)/ckeditor5-build-decoupled-document';  
export default {  
name: "MailSend",  
data() {  
return {  
editor: DecoupledEditor,  
editorConfig: {  
ckfinder: {  
uploadUrl: '[https://mySite/image/ckUpload?command=QuickUpload&type=Files&responseType=json](https://mySite/image/ckUpload?command=QuickUpload&type=Files&responseType=json)',  
},  
},  
emailText: '',  
}  
},  
mounted(){  
},  
methods: {  
onReady(editor) {  
// Insert the toolbar before the editable area.  
editor.ui.getEditableElement().parentElement.insertBefore(  
editor.ui.view.toolbar.element,  
editor.ui.getEditableElement()  
);  
},  
}  
}  
</script>

کد سمت سرور(با فریم ورک لاراول هست اما میتونی بفهمی منظورم رو) :

 /**
     * @param Request $request
     * @return string
     * @throws ValidationException
     */
    public function ckUpload(Request $request)
    {
        $this->validate($request, [
            'upload' => ['required', 'image']
        ]);

        try {
            $file = $request->upload;
            $path = str_replace('local/public/', '', public_path('/img/ckeditor'));
            $name = round(microtime(true) * 1000) . '-' . rand(100000, 999999) . '.';
            //Display File Mime Type
            $fileMimeType = $file->getMimeType();
            $name = $name . str_after($fileMimeType, '/');

            $file->move(($path), $name);

            return  response()->json(['fileName'=>$name,'uploaded'=>1,'url'=>'https://mysite/img/ckeditor/' . $name],200);        } catch (\Exception $exception) {
           return httpStatusCode::status500();
        }
    }
Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248
بسیار بسیار ممنونم

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

خواهش میکنم دوست عزیز

Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248
برای آپلود تصویر زمانی که روی آیکون کلیک میکنم هیچ گزینه ای برای آپلود نداره یعنی فقط باید url داده بشه?

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

روی ایکون تصویر باید کلیک کنی. داخل console خطا نمیده؟

Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248
خیر هیچ خطایی نیس

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

کد هات مشکل داره.
کد هات رو برام بفرس چک کنم.

Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248

import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
data() {
            return {
                editor:DecoupledEditor,
                editorConfig: {
                    ckfinder: {
                        uploadUrl: '/admin/product/upload-image',
                    },
                },
            }
        }

<ckeditor :editor="editor" :config="editorConfig" ></ckeditor>
Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248
دکمه هست اما display none داره
نمیدونم چرا

Ashkan Nazari ( 2220 تجربه )
2 روز پیش
<ckeditor :config="editorConfig" id="emailText" :editor="editor" [@ready](https://roocket.ir/@ready)="onReady" v-model="htmlForEditor"></ckeditor>

data() {  
return {  
editor: DecoupledEditor,  
editorConfig: {  
ckfinder: {  
// Open the file manager in the pop-up window.  
openerMethod: 'popup',

                uploadUrl: 'https://mySite/api/v1/image/ckUpload?command=QuickUpload&type=Files&responseType=json',

                options: {
                    resourceType: 'Images'
                }
            },
        },
        htmlForEditor: '',
    }
},

methods: {

    onReady(editor) {
        // Insert the toolbar before the editable area.
        editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
        );
    },
}
Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

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

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

توی این همه امکانات نشون میده و توی قبلی اینجوری نبود؟ منظورتون اینه؟
خوب ckeditor چند کامپوننت مختلف داره که این حالت داکیومنت هست

Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248
وقتی روی ادیتور فوکس نکرده ام و روی تصویر کلیک میکنم فایل بروزر باز میشه
اما بعد فوکس کردن اون امکانات پیشفرض قبل فوکس نیستند و تمام امکانات رو نشون میده که توی این حالت وقتی روی ایکون تصویر کلیک میکنم فایل بروزری نیس
توی حالت کلاسیک هم همینظور بود

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

احتمالا جایی کدی نوشتی که باعث این کار میشه

Ali Ghaleyan ( 3585 تجربه )
2 روز پیش

@ashkannazari248
میشه تموم پکیجایی که برای ckeditor نصب کردید رو بگید
هر چیزی که تو package.json درمورد ckeditor هست

Ashkan Nazari ( 2220 تجربه )
2 روز پیش

npm install --save @ckeditor/ckeditor5-vue
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-decoupled-document

برای ارسال پاسخ باید وارد سایت شوید