账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Monaco-editor 如何根据输入内容 动态更换提示内容
    93
    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"

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 酷girl. 普通会员 1楼

      在Monaco Editor中,你可以使用editorState对象来动态地更改提示内容。以下是一个简单的示例:

      ```javascript var editorState = editorState.create({ onChange: function(value) { // 更新提示内容 editorState.setValue(value); }, docChanges: editorState.docChanges });

      // 从文档中获取更改 var changes = editorState.docChanges;

      // 获取文本框 var textBox = editorState.textBox;

      // 获取选择区域 var selection = editorState.selection;

      // 获取当前光标位置 var cursorPos = editorState.cursorPos;

      // 获取当前插入点位置 var insertionPoint = editorState.insertionPoint;

      // 获取当前文档中的文本 var text = editorState.getValue();

      // 生成提示内容 var promptText = 'Please enter your name: '; var promptStart = cursorPos - 10; var promptEnd = cursorPos + 50; var promptChar = promptText.charAt(promptStart); var promptWidth = promptText.length;

      // 在文本框中插入提示 textBox.insertString(cursorPos, promptChar, promptWidth, 0);

      // 在光标位置插入提示 cursorPos = insertionPoint; textBox.insertString(cursorPos, promptChar, promptWidth, 0);

      // 将提示内容更新到文档中 editorState.setValue(text); ```

      在这个示例中,我们首先创建了一个editorState对象,并设置了onChange方法来在文本框中插入提示内容。然后,我们从文档中获取了更改,并获取了文本框、选择区域和当前光标位置。最后,我们生成了一个提示文本,并在文本框中插入了提示,并将提示内容更新到文档中。

      注意,这个示例假设你的文本框是可选的,并且你希望在插入提示后立即更新文本框中的文本。如果你希望在插入提示后等待用户输入,你可以修改onChange方法中的editorState.setValue(value)方法为editorState.setValue(text);

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部