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

问题描述 投票:0回答:1

我想在Ace编辑器中使用vim模式时显示状态栏。似乎已经存在一个 statusbar 扩展,但是使用它会导致一些错误。我正在使用以下代码。我是 JS 新手,因此感谢任何帮助。

<!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 Uncaught TypeError: this.updateStatus is not a function
    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
javascript statusbar ace-editor
1个回答
0
投票

StatusBar
是一个构造函数,因此应该用 new

调用

<!DOCTYPE html>
<html>

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

    <script src="https://www.unpkg.com/[email protected]/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://www.unpkg.com/[email protected]/src-noconflict/ext-statusbar.js" type="text/javascript"
        charset="utf-8"></script>

    <script> 
        var editor = ace.edit(document.getElementById("container"), {
          mode: "ace/mode/golang",
          value: 'package main\n\nfunc main(){\n    fmt.Println("hw")\n}',
          keyboardHandler: "ace/keyboard/vim"
        });

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

</html>

© www.soinside.com 2019 - 2024. All rights reserved.