Ace Editor在Vim模式下显示StatusBar时出现错误

问题说明 #

我希望在Ace Editor的Vim模式下显示状态栏，使用现成的statusbar扩展时出现错误，本人刚接触JavaScript，寻求帮助。

我的代码 #

<!DOCTYPE html>
<html>

<body>
    <div id="container" style="width: 400px; height: 300px; border: 1px solid grey"></div>
    <div id="status"></div>

    <script src="/static/js/ace-editor/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/ace-editor/src-noconflict/ext-statusbar.js" type="text/javascript"
        charset="utf-8"></script>

    <script>
        var editor = ace.edit("container");
        editor.session.setMode("ace/mode/golang");
        editor.session.setValue('package main\n\nfunc main(){\n    fmt.Println("hw")\n}');
        editor.setKeyboardHandler("ace/keyboard/vim");

        const sb = ace.require("ace/ext/statusbar");
        var statusBar = sb.StatusBar(editor, document.getElementById("status"));
    </script>
</body>

</html>

控制台错误信息 #

ext-statusbar.js:13 未捕获 TypeError: this.updateStatus 不是一个函数
    at Object.<anonymous> (ext-statusbar.js:13:14)
    at callback (ace.js:1369:9)
(anonymous) @   ext-statusbar.js:13
callback    @   ace.js:1369
setTimeout      
_self   @   ace.js:1374
EventEmitter._signal    @   ace.js:3459
(anonymous) @   keybinding-vim.js:6145
EventEmitter._signal    @   ace.js:3459
CodeMirror.signal   @   keybinding-vim.js:227
clearInputState @   keybinding-vim.js:1861
handleEsc   @   keybinding-vim.js:1702
handleKeyInsertMode @   keybinding-vim.js:1722
findKey @   keybinding-vim.js:1781
handleKey   @   keybinding-vim.js:1680
(anonymous) @   keybinding-vim.js:5975
operation   @   keybinding-vim.js:285
Vim.handleKey   @   keybinding-vim.js:5974
multiSelectHandleKey    @   keybinding-vim.js:6011
handleKeyboard  @   keybinding-vim.js:6123
$callKeyboardHandlers   @   ace.js:4202
onCommandKey    @   ace.js:4234
onCommandKey    @   ace.js:13397
normalizeCommandKeys    @   ace.js:875
(anonymous) @   ace.js:893

解决方法 #

报错核心原因是未使用new关键字实例化StatusBar构造函数，导致this指向全局对象而非StatusBar实例，因此找不到updateStatus方法。同时调整初始化顺序并补全依赖脚本，即可解决问题：

修改后的代码：

<!DOCTYPE html>
<html>

<body>
    <div id="container" style="width: 400px; height: 300px; border: 1px solid grey"></div>
    <div id="status"></div>

    <script src="/static/js/ace-editor/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/ace-editor/src-noconflict/ext-statusbar.js" type="text/javascript"
        charset="utf-8"></script>
    <!-- 补全Vim模式依赖的键盘绑定脚本 -->
    <script src="/static/js/ace-editor/src-noconflict/keybinding-vim.js" type="text/javascript"
        charset="utf-8"></script>

    <script>
        var editor = ace.edit("container");
        editor.session.setMode("ace/mode/golang");
        editor.session.setValue('package main\n\nfunc main(){\n    fmt.Println("hw")\n}');

        // 使用new关键字正确实例化状态栏
        const sb = ace.require("ace/ext/statusbar");
        var statusBar = new sb.StatusBar(editor, document.getElementById("status"));

        // 最后启用Vim键盘模式
        editor.setKeyboardHandler("ace/keyboard/vim");
    </script>
</body>

</html>

关键修改点：

• 给sb.StatusBar加上new关键字，确保实例化出正确的状态栏对象
• 调整初始化顺序，先创建状态栏再启用Vim模式，避免事件绑定冲突
• 补全引入keybinding-vim.js脚本（原代码遗漏，Vim模式必须依赖该脚本才能运行）

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