jodit icon indicating copy to clipboard operation
jodit copied to clipboard

How to add onKeyup and onPaste events in Jodit-react?

Open naganand123 opened this issue 4 years ago • 2 comments

Jodit Version: 3.4.xxxxx

Browser: OS: Is React App:

const [editorData, setEditorData] = useState(value);

const [showEditor, setShowEditor] = useState<boolean>(false);

const config = useMemo(() => ({ readonly: false, showCharsCounter: false, showWordsCounter: false, showXPathInStatusbar: false, height: '300', toolbarAdaptive: false, buttons: richTextEditorConfig(), uploader: IMAGE_UPLOAD, askBeforePasteFromWord: false, askBeforePasteHTML: false, popup: { // removing the file upload option from hyperlink a: markAsAtomic([ { name: 'eye', tooltip: 'Open link', exec: (editor: any, current: any) => { const href = current.href;

                    if (current && href) {
                        editor.ow.open(href);
                    }
                },
            },
            {
                name: 'link',
                tooltip: 'Edit link',
            },
            'unlink',
        ]),
    },
}), []);

{showEditor ? <Box> <JoditEditor value={editorData} config={config} onBlur={(newContent: any) => handelRichTextContent(newContent)} /> </Box> : <Box className={isExpandedView ? classes.editorSection : classes.minTileEditor} dangerouslySetInnerHTML={{ __html: editorData }}></Box>}

How to handel onKeyup and onPaste events?

Expected behavior: need to handel onKeyup and onPaste events Actual behavior: unable to handel onKeyup and onPaste events

naganand123 avatar Apr 08 '22 12:04 naganand123

Just add them through the event mechanism of Jodit itself

const config = useMemo(() => ({
   events: {
      keyup: (e) => console.log(e),
      paste: (e) => console.log(e),
   }
});

xdan avatar Apr 11 '22 08:04 xdan

Thank you

naganand123 avatar Apr 12 '22 11:04 naganand123