0

I have implemented react CK editor using the tutorial https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

The code is as follows.

import React, {Component} from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return ( 
            <div className = "App">                
            <h2> Using CKEditor 5 build in React < /h2> 
            <
            CKEditor editor = {
                ClassicEditor
            }
            data = "<p>Hello from CKEditor 5!</p>"
            onInit = {
                editor => {
                    // You can store the "editor" and use when it's needed.
                    console.log('Editor is ready to use!', editor);
                }
            }
            onChange = {
                (event, editor) => {
                    const data = editor.getData();
                    console.log({
                        event,
                        editor,
                        data
                    });
                }
            }
            />
            </div>
        );
    }
}

export default App;

Now i need to add a custom button to the toolbar which when clicked a function needs to be called.

I have seen posts on adding new plugins but i am not sure on how to implement this in the react way.

Any help would be appreciated.

1 Answer 1

0

You need to create a plugin that will register a new button. Then you can load your plugin to the editor. I will leave you some links to the documentation that should help you:

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.