Question

我试图在Kibana EUI框架内为编辑器添加自定义自动完成功能。

基本上，我有以下代码：

<EuiCodeEditor
                    mode="yaml"
                    theme="github"
                    width="100%"
                    height="100%"
                    className="ace-tm"
                    value={configurationText}
                    onChange={(e) => onChangeEventText(e)}
                    setOptions={{
                        fontSize: '14px',
                        enableBasicAutocompletion: true,
                        enableSnippets: true,
                        enableLiveAutocompletion: true
                    }}
                    onBlur={() => {
                        console.log('blur');
                    }} // eslint-disable-line no-console
                    aria-label="Code Editor"
                    onLoad = {editor => {   
                        console.log("EDITOR");
                        console.log(editor);
                        console.log(editor.completers);
                      //  editor.completers = [staticWordCompleter];
                      /*  var mode = editor.getMode();   
                        mode.getCompletions =  (state, session, pos, prefix) => {
                            return [];
                        } ; 
                        editor.setMode(mode);
                        editor.completers = [staticWordCompleter];*/
                    }}
                />

正如您在onLoad内看到的那样，我正在获取编辑器指针以添加自定义自动完成功能，但无法正常工作。 ace编辑器文档对于Eui框架中的react-ace不太好，所以将不胜感激。

EDIT1 解决方法：您可以在答案内阅读，现在我面临另一个问题：自动完成功能建议在文档内提供自定义和关键字。我只需要我的自定义建议。我该怎么办？

Answer 1

刚解决，我添加了此导入：

import 'brace/ext/language_tools';

然后将我的onLoad编写如下：

onLoad={editor => {

                        var mode = editor.getSession().getMode();

                        mode.getCompletions = (state, session, pos, prefix, callback) => {
                            var completions = [];
                            
                            ["example1", "example2"].forEach(function (w) {

                                completions.push({
                                    value: w,
                                    meta: "my completion",
                                    snippet: `@{${w || ""}}`,
                                    caption: w || ""

                                });
                            });

                            return completions;
                          
                        }

                        editor.getSession().setMode(mode);

                        console.log("EDITOR");
                        console.log(editor.getSession().getMode().getCompletions());

                    }}

现在我面临另一个问题，我正在更新问题

将自定义自动完成功能添加到react-ace EUI Kibana

1 个答案: