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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM