alvnrapada

class TextEditor extends Component{
  constructor(props) {
    if (typeof window !== 'undefined') {
      this.CKEditor = require('@ckeditor/ckeditor5-react')
      this.ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
    }
  }
  render(){
    const CKEditor = this.CKEditor
    const ClassicEditor = this.ClassicEditor

alvnrapada

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        xhr.open('POST', this.url, true);
        xhr.responseType = 'json';
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
        xhr.setRequestHeader('Authorization', 'YOUR_TOKEN')
    }

alvnrapada

    _initListeners( resolve, reject ) {
        ......
        
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;
            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            // If the upload is successful, resolve the upload promise with an object containing

alvnrapada

constructor(props) {
    // CKEditor 5's FileLoader instance.
    this.loader = props;
    // URL where to send files
    this.url = `${ENV}/Services/SaveImage`;
}

alvnrapada

function MyCustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader)
  }
}

alvnrapada

const custom_config = {
  extraPlugins: [ MyCustomUploadAdapterPlugin ],
  ...
}

alvnrapada

_sendRequest() {
   const data = new FormData()

   this.loader.file.then(result => {
      data.append('file', result)
      this.xhr.send(data)
   })
}

alvnrapada

import React, { Component, Fragment } from 'react'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import { ENV } from '../constants/variables'
import { getToken } from "../services/auth"

class TextEditor extends Component{
  render(){
    const { value, onChange } = this.props // <- Dont mind this, just handling objects from props because Im using this as a shared component.