如何在Ace Editor中指定自定义标记列表以列出自动完成功能?

时间:2018-12-04 22:02:03

标签: javascript reactjs ace-editor react-ace

按照Ace Editor完成自动补全设置后,我可以使用react-ace进行自动补全。但是,我需要一些自定义标记才能在内置的自动完成列表中使用。

react-ace的存储库将这些属性定义为

enableBasicAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
enableLiveAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),

但这是array是什么?

我尝试设置enableBasicAutocompletion={ ['custom'] }enableBasicAutocompletion={ [ (...args) => console.log(args) ] },但都失败了,并出现了关于getCompletions not a function的错误。

如何将这些自定义自动填充关键字添加到列表中?

<AceEditor
    name={ this.uniqueName }
    mode="javascript"
    theme="github"
    onChange={ onChange }
    enableBasicAutocompletion
    enableLiveAutocompletion
/>

2 个答案:

答案 0 :(得分:2)

只需导入此!

import "ace-builds/src-noconflict/ext-language_tools"

并在渲染函数中编写此代码

<AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
    setOptions={{
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      enableSnippets: true
    }}

答案 1 :(得分:1)

使用editor.completers数组添加一个新的完成程序,该完成程序返回所需的完成情况

editor.completers.push({
    getCompletions: function(editor, session, pos, prefix, callback) {
        var completions = [];
        // we can use session and pos here to decide what we are going to show
        ["word1", "word2"].forEach(function(w) {

            completions.push({
                value: w,
                meta: "my completion",

            });
        });
        callback(null, completions);
    }
})