I'm adding a Jodit editor to a webpage. I'd like to be able to paste formatted text from, say, MS Word, into the editor. I can paste text that does not call the little pop-up for pasting html text, but not text with formatting. The console logs a warning that addRange(): The given range isn't in document. Indeed, logging window.getSelection().rangeCount returns 0 (instead of 1 in other cases). I have no idea what is wrong as pasting from various programs, of course, works on the website. Am I missing an event?
The problem was that the editor was in an ag-grid cell. The different selections in the dialog box when pasting from MS Word into the editor lay outside of the ag-grid cell, and therefore clicking in the dialog ended the ag-grid session mid-edit!
As the behavior I was looking for is to keep the formatting, I simply turned off the dialog box (askBeforePasteFromWord: false, askBeforePasteHTML: false). To still handle the pasting from MS Word (because MS Word), added in Jodit's author's code to auto-handle (https://github.com/xdan/jodit/issues/197):
jodit_editor = new Jodit(text_area_element, {
hotkeys: {
redo: 'ctrl+z',
undo: 'ctrl+y,ctrl+shift+z',
indent: 'ctrl+]',
outdent: 'ctrl+[',
bold: 'ctrl+b',
italic: 'ctrl+i',
removeFormat: 'ctrl+shift+m',
insertOrderedList: 'ctrl+shift+7',
insertUnorderedList: 'ctrl+shift+8',
openSearchDialog: 'ctrl+f',
openReplaceDialog: 'ctrl+r',
},
events: {
processPaste: function(event, html){
jodit_editor.selection.insertHTML(html);
jodit_editor.tempContent = jodit_editor.getEditorValue();
},
afterPaste: function(event){
let el = $('<div></div>');
el.html(jodit_editor.tempContent ? jodit_editor.tempContent : jodit_editor.getEditorValue());
jodit_editor.setEditorValue(el.html());
jodit_editor.tempContent = null;
},
},
askBeforePasteFromWord: false,
askBeforePasteHTML: false
});