Trumbowyg编辑器：如何设置Ctrl+Enter实现默认Enter换行功能？

我之前也碰到过类似的需求，Trumbowyg确实没有直接提供Ctrl+Enter的配置项，但我们可以通过绑定自定义按键事件，调用编辑器内置的命令来实现这个功能，具体操作如下：

1. 绑定按键监听事件 #

在你初始化编辑器之后，获取编辑器的容器DOM，监听keydown事件，检测Ctrl+Enter组合键的触发：

// 假设你的编辑器初始化代码是这样的
const editor = $('#your-editor-selector').trumbowyg();

// 获取编辑器的容器元素
const editorContainer = editor.$box;

// 绑定按键事件
editorContainer.on('keydown', function(e) {
    // 检测是否同时按下了Ctrl和Enter键
    if (e.ctrlKey && e.key === 'Enter') {
        // 阻止默认行为和事件冒泡，避免和你重写的Enter逻辑冲突
        e.preventDefault();
        e.stopPropagation();
        
        // 调用编辑器内置的默认换行/分段命令
        // 这里分两种情况，对应Trumbowyg默认的Enter行为：
        // - 如果默认Enter是插入新段落（<p>标签），用这个：
        editor.execCmd('insertParagraph');
        
        // - 如果默认Enter是插入换行符（<br>标签），替换成这个：
        // editor.execCmd('insertLineBreak');
    }
});

2. 关键说明 #

Trumbowyg的核心编辑操作都是通过execCmd方法执行的，insertParagraph和insertLineBreak就是编辑器原生Enter键对应的命令。你可以根据自己原本的默认Enter行为选择对应的命令——比如如果你的编辑器默认按下Enter是分段，就用insertParagraph，如果是换行就用insertLineBreak。

如果你之前重写Enter键是通过Trumbowyg的自定义按键逻辑，记得在你的重写代码里也加个判断：如果按下了Ctrl键，就跳过自定义逻辑，这样能避免冲突。

备选方案：模拟原生Enter事件 #

如果直接调用execCmd不生效，也可以尝试在编辑器的可编辑区域模拟原生Enter事件，但这种方法可能会触发你重写后的Enter逻辑，所以优先推荐上面的方案：

editorContainer.on('keydown', function(e) {
    if (e.ctrlKey && e.key === 'Enter') {
        e.preventDefault();
        e.stopPropagation();
        
        // 获取编辑器的可编辑区域
        const editableArea = editorContainer.find('[contenteditable=true]')[0];
        // 创建并触发原生Enter事件
        const nativeEnterEvent = new KeyboardEvent('keydown', {
            key: 'Enter',
            bubbles: true,
            cancelable: true
        });
        editableArea.dispatchEvent(nativeEnterEvent);
    }
});

这种方式相当于让编辑器“以为”用户按下了普通的Enter键，从而执行默认行为，但要注意如果你的Enter重写逻辑没有排除Ctrl键的情况，可能会触发自定义逻辑而非默认行为。

内容的提问来源于stack exchange，提问作者lukaszkups