• CodeMirror入门

    使用CodeMirror实现一些自定义的规则

    因为项目中需要一个能够实现自定义规则的文本编辑器，对比了几个库，最终还是选用了CodeMirror

    CodeMirror的优点

    1. 文档完善，简单易懂
    2. Demo丰富
    3. 可扩展性强

    今天我们就来实现一些自定义的语言规则，这些规则只是让大家对CodeMirror的使用方法有一个初步的了解，并不一定实用：

    1. 自定义关键字高亮
    2. 输入左括号自动出现右括号
    3. 左右括号颜色高亮
    4. 自定义代码补全下拉提示框

    开工，第一步，我们可以去github上把CodeMirror的代码拉下来，或者用npm安装也可以，然后使用到了里面的几个关键文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    // 核心文件
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    // 自动补全提示框
    <script src="../addon/hint/show-hint.js"></script>
    <link rel="stylesheet" href="../addon/hint/show-hint.css">
    // 左右括号颜色高亮
    <script src="../addon/edit/matchbrackets.js"></script>

    // textarea内是预设的文本
    <textarea id="editor">123 hello world $aaa$</textarea>

    两个核心文件是必不可少的，其他的各种addons则是选配

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    		 
    // 定义我们需要高亮的关键字
    const myHighlightList = [
        'hello',
        '你好',
        '$aaa$'
    ]
    CodeMirror.defineMode('myMode', (config) => {
        return {
            /**
                这个token方法就是用来标亮关键字的，
                CodeMirror会自上而下，从左往右得遍历每一个字符，依次调用token方法。
                stream参数可以用来控制遍历的粒度，比如我调用方法 stream.eatWhile(/s/),
                那么当前cursor后面所有的空格会被匹配到stream中，stream.current()的值就是所有匹配到的空格。
            **/
            token: (stream) => {
                if (stream.eatSpace()) { return null }

                stream.eatWhile(/[$wu4e00-u9fa5]/)

                const cur = stream.current()
                const exist = myHighlightList.some((item) => {
                    return item === cur
                })

                /**
                 def 表示蓝色，CodeMirror为我们定义了许多颜色，其他还有：
                keyword {color: #708;} 
                atom {color: #219;}
                number {color: #164;}
                等等，具体可以看codemirror.css文件中的定义
                **/
                if (exist) {
                    return 'def'
                }

                stream.next()
            }
        }
    })

    // 定义想要自动补全的words
    const myHintList = [
        'hint1',
        'hint2',
        'ha2',
        'ha3'
    ]
    CodeMirror.registerHelper("hint", "myMode", function (cm) {
        var cur = cm.getCursor(), token = cm.getTokenAt(cur);
        var start = token.start, end = cur.ch
        var str = token.string

        // 每次按下 Alt+/ 后会执行这个方法，这里将当前输入的字符和myHintList内的文本做前缀匹配过滤，实现一边输入一边查找的功能
        const list = myHintList.filter((item) => {
            return item.indexOf(str) === 0
        })

        if (list.length) return {
            list: list,
            from: CodeMirror.Pos(cur.line, start),
            to: CodeMirror.Pos(cur.line, end)
        };
    });

    const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
        lineNumbers: true, // 是否显示行号
        extraKeys: { "Alt-/": "autocomplete" }, // 定义自动补全的快捷键
        matchBrackets: true, // 是否添加匹配括号高亮
        mode: 'myMode' // 自定义的mode名称
    });

    // 这里实现的功能就是按下左括号，自动添加右括号
    // 中括号，大括号同理
    editor.addKeyMap({
        name: 'autoInsertParentheses',
        "'('": (cm) => {
            const cur = cm.getCursor()

            cm.replaceRange('()', cur, cur, '+insert')
            cm.doc.setCursor({ line: cur.line, ch: cur.ch + 1 })
        }
    })
  • 相关阅读:
    【模拟7.22】方程的解（拓展欧几里德）
    Dijkstra堆优化模板
    7.19考后总结
    《机器学习实战》读书笔记
    从K近邻算法、距离度量谈到KD树、SIFT+BBF算法
    《c程序设计语言》-3.2 字符串转换
    《c程序设计语言》-3.1 判断语句多少影响时间
    《c程序设计语言》-2.10 不用if-else 转换大小写
    《c程序设计语言》-2.9
    《c程序设计语言》-2.6~2.8
  • 原文地址：https://www.cnblogs.com/guochongbin/p/10642969.html
Copyright © 2020-2023  润新知