首页 文章

摩纳哥编辑器 - 使用文本预先填充查找控件

提问于
浏览 次
1

我在我的React应用程序中托管了一个Monaco编辑器 .

到目前为止，我已经让编辑器在编辑器安装时打开了find控件，但是我需要用一些文本预先填充它 .

目前的一些代码看起来像这样：

... 

class CodeEditorMonaco extends Component {
  constructor (props) {
    super(props)
    this.editorDidMount = this.editorDidMount.bind(this)
    this.editor = null
  }

  editorDidMount (editor, monaco) {
    editor.focus()
    editor.getAction('actions.find').run()
  } 

  render () {
    return (
      <div className='code-editor'>
        <MonacoEditor
          width='100%'
          height='75vh'
          language='json'
          editorDidMount={this.editorDidMount}
          ref={editor => { this.editor = editor }}
        />
      </div>
    )
  }
}
...

我认为API文档不清楚这是否可行 .

我的第一直觉是 editor.getAction('actions.find').run('text here') ，但这似乎不起作用

当您在编辑器中突出显示一个单词，然后按 CMD+F 时，您会获得预先填充文本的查找控件，因此我相信它可以实现 .

任何帮助，将不胜感激 .

查找控件：
Find control

javascript reactjs monaco-editor visual-studio-monaco

2 回答

  • 0

    有一种方法可以做你想做的事情，而这正是你已经描述过的：

    • 为要搜索的术语选择文本

    editor.setSelection(new monaco.Range(18, 8, 18, 15));

    • 触发查找操作

    editor.trigger('', 'actions.find');

    要么

    editor.getAction('actions.find').run('');

    回复于
  • 0

    您可以在Monaco游乐场尝试 .

    const editor = monaco.editor.create(document.getElementById("container"), {
    value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
    language: "json"
});

const model = editor.getModel();
const range = model.findMatches('d')[0].range;

editor.setSelection(range);
editor.getAction('actions.find').run();

    首先，从模型中获取要查找的字符串范围 . 第二，设定选择 . 第三，触发选择动作 .

    回复于

相关问题