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

سلام خدمت دوستان
من از کامپوننت 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',

                }

vuejs

ثبت پرسش جدید

اشکان نظری

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

@ashkannazari2487 سال پیشمطرح شد

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

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

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