03月20, 2019

codemirror的高亮处理

需求是这样的:根据搜索条件展示日志,且高亮筛选的关键词:

alt

碰到的第一个问题

刚开始的时候,我是没用codemirror的,但测试提出要显示行号且要高亮关键词。

于是乎,我就像上篇文章那样,在代码中加入了react-mirror

然而碰到一个坑,我的代码是类似这样的:

import React from 'react';
import CodeMirror from 'react-codemirror';

class Test extends React.Component {
    state = {
          logContent: '正在加载中'
    }
    componentDidMount(){
         setTimeout(() => { 
              this.setState({
                    logContent: 'aaaaaaaaaaa'
              })
         }, 1000)
    }
    render(){
         const codeMirrorOpt = {
            lineNumbers: true,
            readonly: true
         }
         return (
              <CodeMirror 
                     value={this.state.logContent}
                     options={codeMirrorOpt}
               />
         )
    }
}

1s后编辑器的内容并没有发生变化!!

查了之后,发现它是受控组件。要解决的话,可以用react-codemirror2

代码上来说,和之前的区分就只有import那一行:

import {UnControlled as CodeMirror} from 'react-codemirror2'

高亮怎么解决

在晨会上,我直接抛了这个风险,觉得我可能需要一天的时间来查相关的资料和解决问题。

因为在前一天晚上,我花了40多分钟,看了一下相关API,无果。。

在文档中看着比较像的,也就这一段了:

alt

不得不提的是:早上的脑子比晚上的好使。

测试提及说:日志展示时,默认不需要高亮。(在不加mode的情况下,codemirror在内部有做一些处理的,所以在展示时,会高亮一些词)

这个给了我一些启发,包括昨晚在乘公交车时也想了一些关键词:codemirror search keyword

幸运的是,居然真让我找到一个问答:Is it possible to highlight a search pattern when codemirror loads

再看react-codemirror2的API:

alt

最终顺利搞定:

<CodeMirror 
    value={this.state.logContent}
    options={codeMirrorOpt}
    defineMode={{
        name: 'highlightSearch', 
        fn: () => {
            return {
                // startState: () => ({}),
                token: (stream) => {
                    const keyword = this.state.keyword;
                    if (keyword !== '' && stream.match(keyword)) {
                        return "highlightSearch";
                    }
                    while (stream.next() != null && !stream.match(keyword, false)) {}
                    return null;
                }  
            }
        }
    }}
/>

然后再加个css

.cm-highlightSearch {
  background: red;
  color: #fff;
}

最终效果如下:

alt

需要注意的是:

alt

结语

CodeMirror这货的API,讲真对于新手来说很不友好。包括它的demo演示,居然真的只是demo,都不带code的。

不过在碰到问题时,只要耐着性子,拆解问题,总是可以解决的。

本文链接:www.my-fe.pub/post/codemirror-highlight.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。