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

برای اپلود تصاویر و کلا کار با فایل فایل منیجر 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';

};

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

سلام. منم چند روزی هست با این ادیتور درگیرم ولی این چیزی که شما میخواید رو حل کردم.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();
        }
    }

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

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

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

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

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

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

@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>

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

<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()
        );
    },
}

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

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

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

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

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

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

@ashkannazari248

سلام من اطلاعات رو با ویو جی اس نمایش می دم ولی سمت کاربر تگ هارو نمایش می ده کسی راه حل مشکل و می دونه لطفا راهنمایی کنه ؟ من از Ckeditor 5 استفاده می کنم.

<td class="sorting\_1">{{index+1}}</td>  
<td><img class="rounded-circle" :src="ourImage(product.pro\_photo)" alt="" width="75" height="75"></td>  
<td>{{product.pro\_title}}</td>  
<td>{{product.pro\_desc | sortlength(50,"...")}}</td>  
<td>{{product.category.cat\_name}}</td>  
<td>{{product.user.name}}</td>  
<td>created\_at</td>  
<td>

                      <router-link to="/edit-product" >
                         <i class="fa fa-edit text-success"></i>
                      </router-link>
                      <a href="#" @click.prevent="deleteProduct(product.id)"> 
                          <i class="fa fa-trash text-danger"></i>
                      </a>
              </td>
            </tr> '''

 data(){  
return{  
categories: {},  
form: new Form({  
pro\_title: '',  
pro\_desc: '<p>Enter Product Description</p>',  
pro\_brand: '',  
category\_id: '',  
pro\_origin: '',  
pro\_type: '',  
pro\_model: '',  
pro\_packing: '',  
pro\_termsSale: '',  
pro\_incoterms: '',  
pro\_payType: '',  
pro\_color: '',  
pro\_photo: '',  
}),  
editor: DecoupledEditor,  
editorConfig: {  
ckfinder: {  
// Open the file manager in the pop-up window.  
openerMethod: 'popup',

                    uploadUrl: '/uploadckeditor',

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

    } 

},'''

@Serjik
برای راستچین شدن در vuejs :

            editorConfig: {
                contentsLangDirection : 'rtl',
                language : 'fa',
            }