codemirror 代码编辑器

·  阅读 2882
codemirror 代码编辑器

在开发vue项目的过程中,需要一个可以自定义规则的代码编辑器,最终选用了Vue-Codemirror来进行开发。Vue-Codemirror是基于Codemirror,并适用于Vue的代码编辑器。

功能介绍

  1. 多种主题支持
  2. 多种语言支持(json、yaml、xml、jsx、sql、css、c、c++等)
  3. 语法校验
  4. 代码折叠
  5. 代码比对以及合并
  6. 代码补全
  7. ... 等功能

Install

  • npm
npm install vue-codemirror --save

复制代码

引入

import 'codemirror/lib/codemirror.css'
import VueCodemirror from 'vue-codemirror';
复制代码

-cdn

<link rel="stylesheet" href=".../codemirror/5.59.1/lib/codemirror.css">

<script type="text/javascript" src=".../codemirror/5.59.1/lib/codemirror.js></script>
<script type="text/javascript" src=".../vue-codemirror/4.0.6/dist/vue-codemirror.js"></script>
复制代码

Mount

  • global
 import Vue from 'vue';
 import VueCodemirror from 'vue-codemirror';

 Vue.use(VueCodemirror,{...options})
复制代码
  • component
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import { codemirror } from 'vue-codemirror';
  
   @Component({
        name: 'Demo',
        components: {
            codemirror
        }
    })

复制代码

Create

<template>
   <codemirror
      ref="myCm"
      :value="info.content"
      :options="cmOptions"
      @input="changes">
   </codemirror>
</template>


<script>
import Vue from 'vue'
import Component from 'vue-class-component'
import { codemirror } from 'vue-codemirror'

@Component({
  name: 'Demo',
  components: {
    codemirror
  }
})

export default class Demo extends Vue {
  cmOptions = {
    mode: 'application/json', // 模式
    theme: '3024-day', // 主题
    indentUnit: 4, // 缩进多少个空格
    tabSize: 4, // 制表符宽度
    lineNumbers: true, // 是否显示行号
    lineWrapping: true, // 是否默认换行
    firstLineNumber: 3, // 在哪个数字开始计数行。默认值为1
    readOnly: false, // 禁止用户编辑编辑器内容
    line: true,
    smartIndent: true // 智能缩进
  }
}
</script>
    
复制代码

当设置mode的时候,需要引入相应mode.js。同样的,设置theme的时候,也需要引入相应的theme.css。由于json属于JavaScript的一种,所以也得引入JavaScript

  • cdn
<link rel="stylesheet" href=".../codemirror/5.59.1/theme/3024-day.css">
    
<script type="text/javascript" src=".../codemirror/5.59.1/mode/javascript/javascript.js"></script>
复制代码
  • npm
import 'codemirror/theme/3024-day.css'
import 'codemirror/mode/javascript/javascript.js'
复制代码

如果mode需要支持yaml,则需要引入yaml.js

import 'codemirror/mode/yaml/yaml.js'
复制代码

Codemirror lint

json需要引入json-lint.js,如果是yaml,则需要引入yaml-lint.js。但是,Codemirror支持的语法校验类型比较少,只支持css、html、javascript、json、yaml、coffeescript

<link rel="stylesheet" href=".../codemirror/5.59.1/addon/lint/lint.css">

<script src=".../codemirror/5.59.1/addon/lint/lint.js"></script>
<script src=".../codemirror/5.59.1/addon/lint/json-lint.js"></script>
<script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>
复制代码

同时还需要在options进行相应配置

this.cmOptions = {
    lineNumbers: true,
    mode: "application/json",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
}
复制代码


Codemirror Merge

首先,需要引入diff_math_patch,然后引入codemirror相应的merge.js以及merge.css

  <link rel="stylesheet" href=".../codemirror/5.59.1/addon/merge/merge.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
  <script src=".../codemirror/5.59.1/addon/merge/merge.js"></script>

复制代码

然后,需要去配置options

mergeOptions = {
    mode: 'application/json', // 模式
    theme: 'yeti', // 主题
    lineNumbers: true, // 是否显示行号
    origLeft: null,
    showDifferences: true, // 当为true(默认值)时, 更改的文本片段将高亮显示
    collapseIdentical: false, // 当为true(默认为false)时,未修改的文本段将被折叠。
    connect: 'center', // 设置用于连接更改的代码块的样式
    value: '{\n    "k1":"v1",\n    "k2":"v2",\n    "k3":"v3",\n    "k4":"v4",\n    "k5":"v5",\n    "k6":"v6",\n    "k7":"v7"\n}', // 左侧老文件
    orig: '{\n    "k1":"v1",\n    "k3":"v3",\n    "k4":"v4",\n    "k7":"v7"\n}' // 右侧新文件
  }

复制代码


Codemirror Fold

首先,需要去引相关折叠功能的相关包

 <link rel="stylesheet" href=".../codemirror/addon/fold/foldgutter.css">
 
<script src=".../codemirror/addon/fold/foldcode.js"></script>
<script src=".../codemirror/addon/fold/foldgutter.js"></script>
<script src=".../codemirror/addon/fold/xml-fold.js"></script>
复制代码

其次,需要去配置options

foldOptions = {
    mode: 'text/html', // 模式
    theme: 'mdn-like', // 主题
    lineNumbers: true, // 是否显示行号
    lineWrapping: true,
    foldGutter: true, // 支持折叠
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
 }

复制代码

折叠前的展示

折叠后的展示

codemirror具体的一些属性方法,大家有需要了解的可以查阅其相应的官方文档以及github。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改