It's pretty easy to use:
const editor = Jodit.make('#editor');const { ContextMenu } = Jodit.modules;const contextMenu = new ContextMenu(editor);editor.events.on(editor.editor, 'contextmenu', event => { contextMenu.show(event.clientX, event.clientY, [ { title: 'Some action', icon: 'search', exec: () => { console.log('Click on some action', event.target); } }, { title: 'Another action', icon: 'bold', exec: () => { console.log('Click another action', event.target); } } ]); return false; // prevent default context menu}); Copy
const editor = Jodit.make('#editor');const { ContextMenu } = Jodit.modules;const contextMenu = new ContextMenu(editor);editor.events.on(editor.editor, 'contextmenu', event => { contextMenu.show(event.clientX, event.clientY, [ { title: 'Some action', icon: 'search', exec: () => { console.log('Click on some action', event.target); } }, { title: 'Another action', icon: 'bold', exec: () => { console.log('Click another action', event.target); } } ]); return false; // prevent default context menu});
You can use svg instead of icon macros.
const action = { title: 'Another action', icon: '<svg>...</svg>', exec: () => { console.log('Click another action'); }}; Copy
const action = { title: 'Another action', icon: '<svg>...</svg>', exec: () => { console.log('Click another action'); }};
If you like Jodit - try Jodit PRO
Module for displaying the context menu.
It's pretty easy to use:
You can use svg instead of icon macros.