Monaco-editor 如何根据输入内容 动态更换提示内容

发布于 2022-09-12 00:55:31 字数 1699 浏览 16 评论 0

需要在自定义语言上增加智能提示。
因为使用的是 react-monaco-editor
所以代码这么写

editorDidMount = (editor, monaco) => {
    editor.onDidChangeModelContent(this.changeModelContent);
 
    this.editor = editor;
    this.monaco = monaco;
    // 注册自定义语言
    monaco.languages.register({ id: 'mylan' });
 
    // 为该语言注册一个语言提示器--联想
    monaco.languages.registerCompletionItemProvider(this.language, {
      provideCompletionItems: () => {
      // this.suggestions 根据输入内容的不同发生变化
        return { suggestions: this.suggestions };
      },
    });
}

changeModelContent = e => {
    console.log('内容改变', this.editor.getValue());
    this.caretOffset = e.changes[0].rangeOffset; //获取光标位置
    this.fetchSuggestions();
};
    // 获取提示项
  fetchSuggestions = () => {
    const currentText = this.editor.getValue();
    let str = currentText.substr(0, this.caretOffset + 1);
    let reg = /薪资.$/;
    if (reg.test(str)) {
      this.suggestions = [{
    label: '一月工资',
    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
    kind: monaco.languages.CompletionItemKind.Function, 
    insertText: '一月工资', 
    detail: '一月工资',
  }];
    } else {
      this.suggestions = [
      {
    label: 'sum',
    kind: monaco.languages.CompletionItemKind.Function,
    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
    insertText: 'sum(${1:})',
    detail: '计算所有参数数值的和',
  }];
    }
    this.editor.trigger('提示', 'editor.action.triggerSuggest', {});
  };

预想的是在输入 薪资后 输入一个点 . 可以智能提示出 「一月工资」。但是目前提示的是 No Suggestions。也就是说 suggestion 没有起作用。
这是什么原因 ?

"monaco-editor": "^0.19.2",
"react-monaco-editor": "latest"

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

-残月青衣踏尘吟 2022-09-19 00:55:31

有找到解决方法吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文