• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

codemirror使用记录

互联网 diligentman 1周前 (02-20) 8次浏览

一、背景

由于项目需要用到 json 编辑功能,尝试使用过 v-jsoneditor, vue-json-editorvue-codemirror, 使用都不尽人意,一番尝试之后,用 codemirror 成功满足需求,小记录一下。

二、codemirror介绍

CodeMirror 是使用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并具有实现更高级编辑功能的多种语言模式 (language mode)和附加组件(addon)。
CodeMirror 具有丰富的 API 和 CSS 主题系统,方便用户为其应用程序作定制化,并且易于扩展。本文主要聚焦于在 vue 工程中 json 的编辑功能。

三、codemirror使用

1. 所需依赖

npm install --save codemirror
npm install --save jsonlint

没有使用 vue-codemirror,直接在 vue 中使用 codemirror
此外,需要安装一个开发依赖 script-loader,方便引入 jsonlint

npm install --save-dev script-loader

安装的版本如下:

"codemirror": "^5.59.2",
"jsonlint": "^1.6.3",
"script-loader": "^0.7.2",

2. JsonEditor 组件

直接封装好 JsonEditor 组件,在 src/components 新建 JsonEditor.vue 文件,如下
codemirror使用记录
直接上代码

<template>
  <div class="json-editor">
  <textarea ref="textarea"></textarea>
 </div>
</template>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/edit/closebrackets'
// eslint-disable-next-line import/no-webpack-loader-syntax
require('script-loader!jsonlint')
export default {
  name: 'JsonEditor',
  props: {
    expression: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      jsonEditor: null,
    }
  },
  watch: {
    expression(val) {
      const editorValue = this.jsonEditor.getValue()
      if (val !== editorValue) {
        this.jsonEditor.setValue(this.expression)
      }
    },
  },
  mounted() {
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      mode: 'application/json',
      theme: 'rubyblue',
      lint: true,
      tabSize: 2,
      smartIndent: true, // 是否智能缩进
      styleActiveLine: true,
      lineNumbers: true,
      gutters: ['CodeMirror-lint-markers'],
      lineWrapping: true, // 自动换行
      matchBrackets: true, // 括号匹配
      autoCloseBrackets: true,
      autoRefresh: true,
    })
    this.jsonEditor.on('change', cm => {
      this.$emit('change', cm.getValue())
    })
    },
  methods: {
    refresh() {
      /*
       * refresh: Fires when the editor is refreshed or resized.
       * Mostly useful to invalidate cached values that depend on the editor or character size. 
       */ 
      this.jsonEditor && this.jsonEditor.refresh()
    },
  },
}
</script>
<style scoped>
  .json-editor {
    height: 100%;
    position: relative;
  }
  .json-editor >>> .CodeMirror {
    height: auto;
    min-height: 250px;
  }
  .json-editor >>> .CodeMirror-scroll {
     min-height: 250px;
  }
  .json-editor >>> .cm-s-rubyblue span.cm-string {
    color: #f08047;
  }
</style>

程序员灯塔
转载请注明原文链接:codemirror使用记录
喜欢 (0)