1

我正在尝试为 Codemirror 实例实现我自己的搜索界面。我目前正在使用react-codemirror2并且我的 Component 有一个 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但是如何使用它来突出显示匹配项？用另一个字符串替换出现？使用插件功能似乎非常困难。

插件部分记录在这里：插件

4

1 回答 1

2

您可以使用代码镜像的 cursor.findnext 和markText功能您可以添加一个类到hightlight。“markerClassName”是我们需要传递的自定义类。

onFind = () => {
    const cursor = this.codeMirror.getSearchCursor(this.state.find, false);
    while (cursor.findNext()) {
        this.codeMirror.markText(cursor.from(), cursor.to(), {
            className: markerClassName
        });
    }
}

请参阅此处的示例小提琴。可以参考 searchcursor 代码实现在这里参考。

于 2018-10-16T16:37:55.227 回答