monaco-editor实现全局内容和文件搜索

最新推荐文章于 2025-05-01 02:18:19 发布

置顶

Java开发高级进阶公众号

最新推荐文章于 2025-05-01 02:18:19 发布

阅读量4k

点赞数

分类专栏：前端文章标签： monaco-editor 全局搜索

本文链接：https://blog.youkuaiyun.com/weixin_42084197/article/details/90486243

版权

本文介绍了如何在monaco-editor中实现全局搜索功能，包括绑定快捷键、搜索框实现、关键字搜索、搜索结果展示、关键字高亮、点击跳转和全局文件搜索。文章详细阐述了每个步骤的关键代码和解决的难点，例如手动创建model，递归遍历文件系统，以及利用antd实现高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面 欢迎关注公众号：java开发高级进阶, 有不会的可以直接公众号留言提问

monaco-editor不提供全局搜索，只提供单个文件内的搜索，那么如何实现全局搜索呢？

环境：Nodejs + React + Dva + monaco-editor + react-monaco-editor + antd

一、绑定快捷键

调用editor.addCommand方法绑定快捷键，通过monaco.KeyMod和monaco.KeyCode选择快捷键

快捷键要在编辑器创建完成时创建，故这段代码要写在editorDidMount里面

全局搜索要有一个搜索框供输入关键字，故在触发快捷键的时候让搜索框显示，默认是不显示。代码如下：

editorDidMount = (editor, monaco) => {
	editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, () => {
		// 显现全局搜索框
		this.setState({
			showModel: true
		})
	});

	editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_N, () => {
		// 显现文件搜索框
		this.setState({
			showFileModel: true
		})
	});
	editor.focus();
}

二、搜索框实现

搜索框样式主要看自己的需求，我这里只写个简单的搜索框

如何实现搜索框根据内容多少滚动显示列表是我们要考虑的一个问题，经过一番搜索，我锁定了react-infinite-scroller，通过InfiniteScroll API实现滚动下拉效果。代码如下：

<div style={
  {height:'400px', overflow:'auto'}}>
	<InfiniteScroll
			pageStart={0}
			loadMore={true}
			hasMore={true || false}
			loader={null}
			useWindow={false}
	>
		{rowsList}
	</InfiniteScroll>
</div>