CODEWITHSUNDEEP
javascriptreactjsckeditor
Dang Kien
Dang Kien

Reputation: 688

REACTJS - Import CKEditor 5 from online build

I got stuck at import the CUSTOM CKEditor 5 to ReactJS. I had already searching the docs but it seems to hard to understand.

First, I go to the Onine Builder in here: https://ckeditor.com/ckeditor-5/online-builder/ and download the zip file.

Then, in this zip file, I have the build folder (contains ckeditor.js, ckeditor.js.map and the translation folder). Copy all the contents in this folder to /src/compoments/CKeditor (to import in React).

And import it like this

import CKEditor from "@ckeditor/ckeditor5-react"; (install via npm)
import ClassicEditor from "./components/ckeditor/ckeditor"; (import from zip file)

And I have this error. Please let me know how to install CkEditor in ReactJS.

Many thanks.

enter image description here

Upvotes: 11

Views: 10396

Answers (5)

Mohammad Abid Ansari
Mohammad Abid Ansari

Reputation: 1

If any one is using vite + react and still facing error

Uncaught SyntaxError: The requested module '/ckeditor5/build/ckeditor.js' does not provide an export named 'default'

Change your vite.config.js file to

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

Reference

Upvotes: 0

Phương Nam
Phương Nam

Reputation: 41

I followed this tutorial and got an import error, and fixed it as follows

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

thanks you for this suport

S. Hesam

Editor enter image description here

Upvotes: 0

kedar nath
kedar nath

Reputation: 73

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 [email protected]:<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>
);
}

Upvotes: 4

Muzamil Ahmad
Muzamil Ahmad

Reputation: 9

Add eslint disabled at the top, like this

/* eslint-disabled */

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

/* eslint-enabled */

Upvotes: -1

S. Hesam
S. Hesam

Reputation: 6773

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;

Upvotes: 20

Related Questions