humehr garivani
4 سال پیش توسط humehr garivani مطرح شد
4 پاسخ

آپلود عکس در ckeditor

سلام.
آپلود عکس رو سرور خودم (SimpleUploadAdapter) رو می خوام پیاده کنم نمیشه
خطا:
filerepository-no-upload-adapter: Upload adapter is not defined

<template>
    <div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="تیتر" />
        </div>
        <div class="form-group">
            <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
        </div>
    </div>
</template>

<script>
import CKEditor from "../../../../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
    name: "admin-article-create",
    data() {
        return {
            editor: ClassicEditor,
            editorData: "<p>Content of the editor.</p>",
            editorConfig: {
                simpleUpload: {
                    uploadUrl: "/admin/articles/image"
                }
            }
        };
    },
    components: {
        ckeditor: CKEditor.component
    }
};
</script>

ثبت پرسش جدید
محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 4 سال پیش مطرح شد
coarad supp
تخصص : برنامه نویس لاراول
@coaradsupp 4 سال پیش مطرح شد
4

سلام من به شکل حلش کردم

<template>
    <div>
        <CKEditor
                :editor="editor"
                v-model="editorData"
                :config="editorConfig"
                @ready="onReady"
        ></CKEditor>
        <input type="text" style="display: none" :name="name" v-model="editorData">
    </div>
</template>
<script>
    import CKEditor from '@ckeditor/ckeditor5-vue'
    import ClassicEditor from '@ckeditor/ckeditor5-build-decoupled-document';

    export default {
        name: 'Editor',
        components: {
            CKEditor: CKEditor.component
        },
        props: {
            name: {type: String,}, value: {type: String, default: ''}
        },
        data() {
            return {
                editorData : this.value,
                editor: ClassicEditor,
                editorConfig: {
                    ckfinder: {
                        uploadUrl: '/upload?_token=' + document.head.querySelector('meta[name="csrf-token"]').content,
                    },
                }
            }
        },
        methods: {
            onReady(editor) {
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                );
            },
        }
    }

    class MediaUploadAdapter {
        constructor(loader) {
            this.loader = loader;
        }

        upload() {
            return this.loader.file.then(uploadedFile => {
                return new Promise((resolve, reject) => {
                    const formData = new FormData();
                    formData.append('image', uploadedFile);
                    axios.post('/admin/upload', formData,
                        {
                            headers: {
                                'Content-Type': 'multipart/form-data;',
                                '_token': document.head.querySelector('meta[name="csrf-token"]'),
                            }
                        }
                    ).then(response => {
                        console.log(response);
                        if (response.data.result === 'success') {
                            resolve({default: response.data.url});
                        } else {
                            reject(response.data.message);
                        }
                    }).catch(error => {
                        console.log(error.response.status, error.response.data.message);
                    });
                });
            });
        }

        abort() {
        }
    }
</script>

<style scoped>
    .ck.ck-editor__editable_inline[dir=ltr] {
        text-align: right !important;
        direction: rtl;
        border: 1px solid #cbcbcb;
        background: #fff;
        min-height: 300px;
    }
</style>

humehr garivani
تخصص : laravel
@humehrgarivani 4 سال پیش مطرح شد
1

@mohsenbostan
@coaradsupp
دم جفتتون گرم هر دوش به دردم خورد


mahdi
تخصص : برنامه نویس تازه وارد
@poyakimia 3 سال پیش آپدیت شد
0

سلام...وقت همه دوستان بخیر..
جناب اقای humehr garivani@ و coarad supp@ بنده هم تو ckeditor با vue.js به مشکل اپلود عکس خوردم....! لطفا اگر کد کامل در کامپوننت و فرستان عکس و ذخیره عکس با متن در سرور و دیتابیس و برای بنده هم ارسال کنید... بی نهایت از شما سپاسگزارم..
با تشکر از همه دوستان گرامی

@humehrgarivani
@coaradsupp


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

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