我正在尝试为Codemirror实例实现自己的搜索界面。我当前正在使用react-codemirror2,并且我的组件具有一个CodeMirror实例,例如:
export default class MyComponent extends React.Component {
state = {find:''}
constructor() {
this.codeMirror = null;
}
onFind = () => {
let cursor = this.codeMirror.getSearchCursor(this.state.find, false);
}
render() {
<CodeMirror editorDidMount={editor => { this.codeMirror = editor }}/>
<div>
<input type="text" value={this.state.find} onChange={(e) => {this.setState({find: e.target.value})}} />
<a onClick={this.onFind}>Find</a>
</div>
}
}
我试图在文件的开头使用CodeMirror随附的插件,如:
import 'codemirror/addon/search/search.js';
import 'codemirror/addon/search/searchcursor.js';
getSearchCursor
在我的SearchCursor
方法内返回一个OnFind
对象,但是如何使用它来突出显示匹配项?用另一个字符串替换出现的内容?似乎很难使用插件功能。
附加组件部分记录在这里:Addons
答案 0 :(得分:1)
您可以使用代码镜像的cursor.findnext和markText功能,可以将一个类添加到突出显示中。 “ markerClassName”是我们需要传递的自定义类。
onFind = () => {
const cursor = this.codeMirror.getSearchCursor(this.state.find, false);
while (cursor.findNext()) {
this.codeMirror.markText(cursor.from(), cursor.to(), {
className: markerClassName
});
}
}