vue中codemirror的使用

2020年05月10日 562点热度 0人点赞 0条评论

最近在改一个前几年写的代码,其中涉及到codemirror,为了方便以后参考,就记录下来

官方文档:https://codemirror.net/doc/manual.html

基本用法

使用npm安装依赖

npm install --save codemirror

引入必要文件

import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'

定义文本框

<textarea ref="editor" v-model="source" style="height:300px;width:600px;" />

初始化

需要放在mounted()中,放在created()中会有问题

CodeMirror.fromTextArea(this.$refs.editor)//第二个参数可选,为选项

一些选项

  • value 初始值
  • mode 用于指定语言,高亮使用
  • theme 主题
  • indentUnit 缩进的大小
  • smartIndent 自动缩进
  • tabSize tab的宽度
  • indentWithTabs 缩进时是否用tab替换空格
  • keyMap 要使用的快捷键
  • extraKeys 定义快捷键
  • lineWrapping 当一行长度过长时是否换行显示
  • lineNumbers 显示行号
  • scrollbarStyle 滚动条样式
  • showCursorWhenSelecting 选择内容时是否显示光标
  • lineWiseCopyCut 没有选择内容时复制当前行
  • undoDepth 最大撤销次数(包括选择操作)

一些功能

代码高亮

设置mode选项,例如C++设置为text/x-c++src,并引入mode/clike/clike

所有可用的值可以在mode/meta.js中的CodeMirror.modeInfo数组中看到

其中,mine为在此处填写的值,mode即为要引入的文件

import 'codemirror/mode/clike/clike'

设置主题

通过theme选项设置,需要引入文件

import 'codemirror/theme/monokai.css'

选项 theme: 'monokai'

代码提示

import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'
// 再根据需要引入其他几个文件
import 'codemirror/addon/hint/anyword-hint'

括号匹配

import 'codemirror/addon/edit/matchbrackets'

选项 matchBrackets: true

括号自动闭合

除了括号,引号也会自动闭合

import 'codemirror/addon/edit/closebrackets'

选项 autoCloseBrackets: true

代码折叠

import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/foldgutter.css'
// 接下来根据需要引入其他几个文件
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
      foldCode: true,      
      foldGutter: true,
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],

滚动条

设置选项,并引入相对应的文件

例如:

选项 scrollbarStyle: 'overlay'

import 'codemirror/addon/scroll/simplescrollbars'
import 'codemirror/addon/scroll/simplescrollbars.css'

高亮当前行

import 'codemirror/addon/selection/active-line'

选项 styleActiveLine: true

注释换行自动添加符号

import 'codemirror/addon/comment/continuecomment'

continueComments: true,
continueLineComment: false

autoRefresh

初始化编辑器时,相应的元素不可见时,可以使用这个功能

import 'codemirror/addon/display/autorefresh'

placeholder

未输入代码时,显示占位的文字,可以显示提示信息等

import 'codemirror/addon/display/placeholder'

然后设置placeholder选项

网页全屏

import 'codemirror/addon/display/fullscreen'

然后可以添加快捷键

      extraKeys: {
        'F11': function(cm) {
          cm.setOption('fullScreen', !cm.getOption('fullScreen'))
        },
        'Esc': function(cm) {
          if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
        } },

F11全屏需要在有焦点的时候使用,不然会让浏览器全屏

  .CodeMirror-fullscreen {
    position: fixed!important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 9999;
  }

样式可以引入相对应的文件,也可以自己写。我用自带样式时,webpack打包后,position会被覆盖,所以加了个!important,然后我的菜单栏z-index比自带的大,所以改用了一个大点的值

查找功能

import 'codemirror/addon/dialog/dialog'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor'
import 'codemirror/addon/search/search'

跳转功能

跳转到指定位置

import 'codemirror/addon/dialog/dialog'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/jump-to-line'

高亮当前选择相同内容

import 'codemirror/addon/scroll/annotatescrollbar'
import 'codemirror/addon/search/matchesonscrollbar'
import 'codemirror/addon/search/matchesonscrollbar.css'
import 'codemirror/addon/search/match-highlighter'
highlightSelectionMatches: { annotateScrollbar: true }
  .cm-matchhighlight {
    color: white !important;
    background-color: red;
  }
  .CodeMirror-selection-highlight-scrollbar {background-color: red}

不知道怎么将目前选择的内容和其他高亮区分开,就在选项中加了showCursorWhenSelecting: true,在当前选择的地方显示光标

监听事件

记录个实例,具体见文档

    const self = this
    this.editor.on('change', function(instance, obj) {
      self.problemChanged = false
    })

likole

人能常清静,天地悉皆归

文章评论