How to add Tab key logic for the jodit editor?

138 views Asked by At

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.

1

There are 1 answers

0
JuanPa On

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