Skip to content

Instantly share code, notes, and snippets.

@ismailkarsli
Last active March 19, 2021 07:23
Show Gist options
  • Save ismailkarsli/2e4c2bb8d7b68e1d5d64a04c20deb35d to your computer and use it in GitHub Desktop.
Save ismailkarsli/2e4c2bb8d7b68e1d5d64a04c20deb35d to your computer and use it in GitHub Desktop.
import React from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/tr.js";
import { useMutation } from "@apollo/client";
import { UPLOAD_PHOTO } from "../../gql/photo/mutation";
class UploadAdapter {
constructor(loader, uploadPhoto) {
this.loader = loader;
this.uploadPhoto = uploadPhoto;
}
upload() {
return this.loader.file.then(
(photo) =>
new Promise(async (resolve, reject) => {
try {
const result = await this.uploadPhoto({
variables: {
photo,
},
});
resolve({ default: result });
} catch (error) {
reject(
"Fotoğraf yüklenirken hata oluştu. Hata mesajı: " + error.message
);
}
})
);
}
}
const Editor = ({ value, setValue }) => {
const [uploadPhoto] = useMutation(UPLOAD_PHOTO);
return (
<div className="CKEditor">
<CKEditor
editor={ClassicEditor}
data={value}
config={{ language: "tr" }}
onChange={(event, editor) => {
const editorData = editor.getData();
setValue(editorData);
}}
onInit={(editor) => {
editor.plugins.get("FileRepository").createUploadAdapter = (
loader
) => {
return new UploadAdapter(loader, uploadPhoto);
};
}}
/>
</div>
);
};
export default Editor;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment