How to add Tab key logic for the jodit editor?

Question

How to add Tab key logic for the jodit editor textarea? There is no indent on key press.

I tried different solutions such as an indent option and to handle press key event but its not correctly. I need use a Tab key similar to the Word editor.

Answer 1

Being honest I had to dig a bit in Jodit src code, although this seems to be the way that the author has in mind.

Here is how I solved it, I hope it helps.

Just use the custom hotkeys plugin and subscribe to that event for processing your custom commands.

// Set this in yout Jodit config
_config = {
    commandToHotkeys: {  // My convention: custom commands should always start with custom to avoid mixing with browser commands.
        // Recommended: command should be in lowercase cause jodit lowers it.
        custominserttab: ["tab"] // Handling tab this will prevent tabIndex field navigation
    }
}

// Subscribe for custom commands processing:
editorInstance.events.on('beforeCommand', (command) => {
    if (command === 'custominserttab') {
        // Insert 4 spaces for example            
        editorInstance.selection.insertHTML("    ");
        return false; // break execute native browser command
    }
});

Is also possible to add shift+tab custom command with logic to detect if indentation (4 spaces) precedes the cursor and remove it.

More on Jodit hotkeys plugin:

https://xdsoft.net/jodit/docs/modules/plugins_hotkeys.html

More on browser commands:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#parameters