阅读 2689

CodeMirror入门指南

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

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

CodeMirror的优点

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

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

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

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

// 核心文件
<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则是选配

// 定义我们需要高亮的关键字
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(/[\$\w\u4e00-\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 })
    }
})
复制代码

关注下面的标签,发现更多相似文章
评论