Selection no longer available

[Damibu]

Hi,

I'm using React and this seemed to work on the previous version. I'm grabbing a reference using the following...

<JoditEditor
   ref={ refObj => { this.jodit = refObj; } }
   value={this.state.content}
   config={this.config}
   onChange={this.onJoditEditorChange}
/>

Then elsewhere trying to add some HTML to the curser position or replace the selected text...

this.jodit.selection.insertHTML( "<p>some HTML</p>" );

The "this.jodit" is defined, but "selection" is NOT defined (ie crashes with an undefined error)!

Is there a different way I should be doing this? I've tried using the SelectStart and SelectEnd values. But they don't change, are always the length of the present value, therefore my HTML gets inserted at the end of the value.

Thanks Dave

[redwanul10]

I am also facing the same issue...i think the reason is eidtorRef stores texarea tag.....but when i register a new button it gives the real EditorInstance in exec function arguments that we are looking for

is there any way to get the EditorInstance on init function like ckEditor have?

[Damibu]

In the end I edited the react file to re-do the Ref setting after the Jodit.make

Not the best, but I needed it fixed ASAP.

            textArea.current = Jodit.make(element, config);

            textArea.current.value = value;
            textArea.current.events.on('blur', () => blurHandler(textArea.current.value));
            textArea.current.events.on('change', () => changeHandler(textArea.current.value));
            textArea.current.workplace.tabIndex = tabIndex || -1;

            if (ref) {
                if (typeof ref === 'function') {
                    ref(textArea.current)
                } else {
                    ref.current = textArea.current
                }
            }

[redwanul10]

first i copied the whole JoditEditor.js file and past into my file (MyJoditEditor.js) then i edited the component by passing an extra init function prop that solved my problem

const element = textArea.current
textArea.current = Jodit.make(element, config)
if (init) init(textArea.current)

now i can get the editorInstance

<MyJoditEditor
init={editor => console.log(editor)}
>

[yluka6]

If there’s someone who has the same problem - it also possible to get the instance with afterInit event:

this.joditConfig = {
  events: {
    afterInit: (instance) => {
      this.jodit = instance;
    },
  }
};

Then you can use this.jodit.selection.insertHTML() as usual.