استفاده از ckeditor

- 1 ماه پیش
توسط Ashkan Nazari آپدیت شد
Saeed Heydari ( 300 تجربه )
1 ماه پیش

سلام دوستان
من می خوام از ckeditor تو vuejs و لاراوب استفاده کنم. ولی نمی دونم بخش آپلود عکسش رو چه جوری پیاده سازی کنم.

Ashkan Nazari ( 5635 تجربه )
1 ماه پیش
<template>

       <ckeditor lan="fa" id="emailText" :editor="editor" @ready="onReady" v-model="emailText"
        :config="editorConfig"></ckeditor>              

</template>

<script>

    import axios_auth from "../../../axios_auth";
    import swal from "sweetalert";
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

    export default {
        name: "MailSend",
        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'
                        }
                    },
                }

            }
        },

        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();
        }
    }
برای ارسال پاسخ باید وارد سایت شوید