英文:
how to use Image upload in ckeditor using vue-ckeditor?
问题
I am using CKEditor. Image button is shown in the toolbar, but when I click and upload an image, the uploaded image is not shown in the editor.
<ckeditor :editor="editor" v-model="form.title" :config="editorConfig"></ckeditor>
The image button is there in the toolbar but unable to upload an image.
You can also see the image in the link below:
https://codepen.io/ckeditor/details/EJBYop
英文:
i am using ckeditor. image button is shown in toolbar but when i click and upload image. uploaded images is not shown in the editor.
<ckeditor :editor="editor" v-model="form.title" :config="editorConfig"></ckeditor>
image button there in toolbar but unable to upload image.
You can also see in below link image:
https://codepen.io/ckeditor/details/EJBYop
答案1
得分: 2
你需要添加自定义上传适配器,如果你不想从源代码中导入 CKEditor,也不想更改 webpack 配置。例如,如果你想使用 base64adapter,你可以这样做:
export default class UploadAdapter {
constructor(loader) {
// The file loader instance to use during the upload.
this.loader = loader;
}
// Starts the upload process.
upload() {
return new Promise((resolve, reject) => {
const reader = new window.FileReader();
reader.addEventListener('load', () => {
resolve({'default': reader.result});
});
reader.addEventListener('error', err => {
reject(err);
});
reader.addEventListener('abort', () => {
reject();
});
this.loader.file.then(file => {
reader.readAsDataURL(file);
});
});
}
// Aborts the upload process.
abort() {
//
}
}
export const uploader = function (editor) {
editor.plugins.get('FileRepository').createUploadAdapter = (loader) =>
new UploadAdapter(loader);
};
然后在 CKEditor 编辑器配置中:
'editorConfig': {'extraPlugins': [uploader]}
英文:
you have to add custom upload adapter if you don't want to import CKEditor from source and do not want to change in webpack configuration.
i.e. if you want to use base64adapter you can do something like
export default class UploadAdapter
{
constructor (loader)
{
// The file loader instance to use during the upload.
this.loader = loader;
}
// Starts the upload process.
upload ()
{
return new Promise((resolve, reject) =>
{
const reader = new window.FileReader();
reader.addEventListener('load', () =>
{
resolve({'default': reader.result});
});
reader.addEventListener('error', err =>
{
reject(err);
});
reader.addEventListener('abort', () =>
{
reject();
});
this.loader.file.then(file =>
{
reader.readAsDataURL(file);
});
});
}
// Aborts the upload process.
abort ()
{
//
}
}
export const uploader = function (editor)
{
editor.plugins.get('FileRepository').createUploadAdapter = (loader) =>
new UploadAdapter(loader);
};
and in ckeditor editor config
'editorConfig': {'extraPlugins': [uploader]}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论