CodeMirror React 实现查找和替换答案

【问题标题】：CodeMirror React implement find and replaceCodeMirror React 实现查找和替换
【发布时间】：2018-07-10 21:56:19
【问题描述】：

我正在尝试为 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 在我的OnFind 方法中返回一个SearchCursor 对象，但是如何使用它来突出显示匹配项？用另一个字符串替换出现？使用插件功能似乎很困难。

插件部分记录在这里：Addons

【问题讨论】：

标签： reactjs codemirror react-codemirror

【解决方案1】：

你可以使用代码镜像的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
        });
    }
}

参见示例小提琴here。可以参考searchcursor代码实现参考here。

【讨论】：