codemirror TAB 缩进问题记录

codemirror 默认 TAB 键是支持缩进的, 但在没有选择文本时, 缩进是一个 Tab 键而不是 indexUnit 对应的空格数. 默认也不支持 Shift - Tab 往回缩进, 这个在排版文本是非常麻烦的.
为了解决这两个问题我们需要重新定义这两个快捷键的实现, 具体伪代码如下:

{ // 此对象为 codemirror 配置选项对象, 下面仅对选项的快捷键相关部分做说明
    extraKeys: {
        Tab: (cm) => {
            if (cm.somethingSelected()) {      // 存在文本选择
                cm.indentSelection('add');    // 正向缩进文本
            } else {                    // 无文本选择  
                //cm.indentLine(cm.getCursor().line, "add");  // 整行缩进 不符合预期
                cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");  // 光标处插入 indentUnit 个空格
            }   
        },  
        "Shift-Tab": (cm) => {              // 反向缩进   
            if (cm.somethingSelected()) {
                cm.indentSelection('subtract');  // 反向缩进
            } else {
                // cm.indentLine(cm.getCursor().line, "subtract");  // 直接缩进整行
                const cursor = cm.getCursor();
                cm.setCursor({line: cursor.line, ch: cursor.ch - 4});  // 光标回退 indexUnit 字符
            }   
            return ;
        },  
    }
}

原文链接 https://wxaxiaoyao.cn/article/53

转载于:https://www.cnblogs.com/--xiaoyao--/p/11277494.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值