score:15

Accepted answer

you should add the content of the zip file to the root of your project like this:

├── ckeditor5
│   ├── build
│   ├── sample
│   ├── src
│   ├── ...
│   ├── package.json
│   └── webpack.config.js
├── node_modules
├── public
├── src
├── ...
└── package.json

then run this command yarn add file:./ckeditor5 or npm add file:./ckeditor5. now you can use your custom editor in this way:

import react, { component } from 'react';
import editor from 'ckeditor5-custom-build/build/ckeditor';
import { ckeditor } from '@ckeditor/ckeditor5-react'

const editorconfiguration = {
    toolbar: [ 'bold', 'italic' ]
};

class app extends component {
    render() {
        return (
            <div classname="app">
                <h2>using ckeditor 5 from online builder in react</h2>
                <ckeditor
                    editor={ editor }
                    config={ editorconfiguration }
                    data="<p>hello from ckeditor 5!</p>"
                    onready={ editor => {
                        // you can store the "editor" and use when it is needed.
                        console.log( 'editor is ready to use!', editor );
                    } }
                    onchange={ ( event, editor ) => {
                        const data = editor.getdata();
                        console.log( { event, editor, data } );
                    } }
                    onblur={ ( event, editor ) => {
                        console.log( 'blur.', editor );
                    } }
                    onfocus={ ( event, editor ) => {
                        console.log( 'focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default app;

score:-1

add eslint disabled at the top, like this

/* eslint-disabled */

your code of ckeditor.js inside build/ckeditor.js

/* eslint-enabled */

score:1

there are two scenarios where you need to change your custom build time to time. in that case, either you can keep on publishing on npm after running

npm run build

on your custom build or you can keep that in your github and install using

npm install git+git@github.com:<your username>/<custom ckeditor>.git

you can rename the name so that whenever you install it goes into

node_modules/@ckeditor/ckeditor5-custom-build

{
  "name": "@ckeditor/ckeditor5-custom-build",
   ....
}


now you need to import like this

import { editor } from '@ckeditor/ckeditor5-custom-build';

and thus all your code would look like this

import react from 'react';
import { ckeditor } from '@ckeditor/ckeditor5-react';
import { editor } from '@ckeditor/ckeditor5-custom-build';

export const  ckeditor =  () => {
  return (
    <div classname="app">
        <h2>using ckeditor 5 build in react</h2>
        <ckeditor
            data="<p>hello from ckeditor 5!</p>"
            onready={ editor => {
                // you can store the "editor" and use when it is needed.
                console.log( 'editor is ready to use!', editor );
            } }
            onchange={ ( event, editor ) => {
                const data = editor.getdata();
                console.log( {"data": data } );
            } }
            onblur={ ( event, editor ) => {
                console.log( 'blur.', editor );
            } }
            onfocus={ ( event, editor ) => {
                console.log( 'focus.', editor );
            } }
        />
    </div>
);
}



Related Query

More Query from same tag