CodeMirror React工具查找和替换

时间:2018-07-10 21:56:20

标签: reactjs codemirror react-codemirror

我正在尝试为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

1 个答案:

答案 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
        });
    }
}

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