How to change the editor configuration dynamically?

[crypto-dump]

I tried to change the heading styles (Font, Font Size, Line Height, ...) dynamically, but I think this requires change the config dynamically after the CKEditor instance created. Do you have any thought about the solution? I already read that it's impossible to change the config dynamically, then what is the alternative way?

[ma2ciek]

Currently, there's a way to restart the editor when the component's id property changes - see https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#component-properties.

There's no other way to change the editor configuration dynamically for now - you can track the progress of ckeditor/ckeditor5#7383.

[CostinBotez]

Hi, @ma2ciek

I'm trying to restart the editor by changing the id property.

const CKEditorWrapper = ({
    data,
    editor = window.CkEditor5.BalloonEditor,
    onInit,
    onChange,
    onBlur,
    config = OPTIONS
}: Props) => {
    const [editorId, setEditorId] = useState(uuidv4());
    useEffect(() => {
        setEditorId(uuidv4());
    }, [config]);

    return (
        <Container id="ContractCKE">
            <CKEditor
                id={editorId}
                config={config}
                editor={editor}
                data={data}
                onReady={onInit}
                onChange={onChange}
                onBlur={onBlur}
            />
        </Container>
    );
};

export default CKEditorWrapper;

My CKEditor component is simply looking like this.

but this produces some errors.

Please let me know what's wrong with my code.

Thank you.

FYI, I'm using ckeditor-react v3.0

[ma2ciek]

I'll take a look.

[CostinBotez]

Hi, @ma2ciek , Did you have any luck on this? I was a bit urgent on this. ;-)

Thank you.

[belkhoujaons]

this works for me ! my code

import ...;

export default class MyClassicEditor extends ClassicEditorBase {
}
export const Editor = (props) => {

    const [channel, setChannel] = useState(false)
    const [id, setId] = useState(1)


    const editorConfig = {
        toolbar: ['bold', 'italic', 'link', 'numberedList', 'bulletedList'
            , '|', 'fontFamily', 'fontSize', 'fontColor',
            , '|', 'placeholder', 'alignment:left', 'alignment:center', 'alignment:right', '|', 'sourceEditing'],
        placeholders: props.schema || []
    };

    const customEditorConfig = {
        toolbar: ['bold', 'italic', 'link', 'numberedList', 'bulletedList'
            , '|', 'fontFamily', 'fontSize', 'fontColor',
            , '|', 'placeholder', 'alignment:left', 'alignment:center',],
        placeholders: props.schema || []
    };

    return (
        <div>
            <div>
                <span className='spanText'>Editor</span>
            </div>
            <div className='editorContainer'>
                <button onClick={() => { setId(id + 1); setChannel(!channel) }}>test me</button>
                <CKEditor
                    id={id}
                    editor={MyClassicEditor}
                    config={channel ? editorConfig : customEditorConfig}
                    data={props.template}
                    onReady={editor => {
                        // You can store the "editor" and use when it is needed.
                        document.ckeditor_ready = true;
                        document.editor = editor;
                        //CKEditorInspector.attach( 'editor', editor );
                    }}
                    onChange={(event, editor) => {
                        const data = editor.getData();
                    }}
                />
            </div>
        </div>
    )
}