Breaking News: Grepper is joining You.com. Read the official announcement!

ckeditor image upload

Thoughtful Trout answered on July 3, 2021 Popularity 10/10 Helpfulness 2/10

answer ckeditor image upload

related image upload from link in ckeditor 5

ckeditor image upload

Comment

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import axios from "axios";

export default function TextEditor({ message = "", value, setData, name }) {
  function uploadAdapter(loader) {
    return {
      upload: () => {
        return new Promise((resolve, reject) => {
          var formData = new FormData();
          formData.append("name", "Ali Hamza");
          loader.file.then((file) => {
            formData.append("files", file);

            axios
              .post(route("imageUpload"), formData)
              .then((res) => res.json())
              .then((res) => {
                resolve({
                  default: `/${res.filename}`,
                });
              })
              .catch((err) => {
                reject(err);
              });
          });
        });
      },
    };
  }
  function uploadPlugin(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return uploadAdapter(loader);
    };
  }
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        extraPlugins: [uploadPlugin],
      }}
      data={value}
      onChange={(event, editor) => {
        const data = editor.getData();
        setData((prevState) => ({
          ...prevState,
          [name]: data,
        }));
      }}
    />
  );
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: ckeditor image-upload javascript

Link to this answer
Share Copy Link

Contributed on Nov 17 2022

Thoughtful Trout

0 Answers Avg Quality 2/10

Closely Related Answers

image upload from link in ckeditor 5

Comment

npm install --save @ckeditor/ckeditor5-upload

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: ckeditor.com

Tags: ckeditor ckedito

Link to this answer
Share Copy Link

Contributed on Jul 03 2021

Important Ibis

0 Answers Avg Quality 2/10

ckeditor image upload

Contents

More Related Answers

ckeditor image upload

Closely Related Answers

image upload from link in ckeditor 5

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.