سلام.
آپلود عکس رو سرور خودم (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>
@humehrgarivani
سلام.
لینک زیر رو بررسی کنید :
https://stackoverflow.com/questions/46765197/how-to-enable-image-upload-support-in-ckeditor-5
سلام من به شکل حلش کردم
<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@ و coarad supp@ بنده هم تو ckeditor با vue.js به مشکل اپلود عکس خوردم....! لطفا اگر کد کامل در کامپوننت و فرستان عکس و ذخیره عکس با متن در سرور و دیتابیس و برای بنده هم ارسال کنید... بی نهایت از شما سپاسگزارم..
با تشکر از همه دوستان گرامی
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟