如何为jodit编辑器添加Tab键逻辑？

Question

如何为jodit编辑器文本区域添加Tab键逻辑？按键时没有缩进。

我尝试了不同的解决方案，例如缩进选项和处理按键事件，但它不正确。我需要使用类似于Word编辑器的Tab键。

Answer 1

说实话，我不得不深入研究一下 Jodit src 代码，尽管这似乎是作者想要的方式。

以下是我的解决方法，希望对你有帮助。

只需使用自定义热键插件并订阅该事件来处理您的自定义命令。

// 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
    }
});

还可以添加带有逻辑的shift+tab自定义命令来检测光标前面是否有缩进（4个空格）并将其删除。

有关 Jodit 热键插件的更多信息：

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

有关浏览器命令的更多信息：

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