利用vue-codemirror展示编辑json数据

安装

由于项目用的是vue2,因此只能安装vue-codemirror@4.x,依赖codemirror@5.x

npm install -S codemirror@5.x
npm install -S vue-codemirror@4.x

codemirror@5.65.7
vue-codemirror@4.0.6

自定义组件

参考了vue json-viewer codemirror-json格式化

创建JsonEditor.vue

代码如下:

<template>
  <div class="json-editor">
    <textarea ref="textarea"/>
  </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/panda-syntax.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/json-lint'
// 折叠代码
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';

export default {
  name: 'JsonEditor',
  props: ['value'],
  data () {
    return {
      jsonEditor: false
    }
  },
  watch: {
    value (value) {
      const editor_value = this.jsonEditor.getValue()
      if (value !== editor_value) {
        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
      }
    }
  },
  mounted () {
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      lineNumbers: true,
      mode: 'application/json',
      gutters: ['CodeMirror-lint-markers',"CodeMirror-linenumbers","CodeMirror-foldgutter"],
      theme: 'panda-syntax',
      lint: true,
      foldGutter: {
        rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent,CodeMirror.fold.comment)
      },
    })

    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
    this.jsonEditor.on('change', cm => {
      this.$emit('changed', cm.getValue())
      this.$emit('input', cm.getValue())
    })
  },
  methods: {
    getValue () {
      return this.jsonEditor.getValue()
    }
  }
}
</script>

<style scoped>
.json-editor {
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 180px;
}
.json-editor >>> .CodeMirror-scroll {
  min-height: 180px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #f08047;
}
</style>

主题设置

参考codemirror主题效果概览选一套喜欢的主题

• 引入主题样式,例:import 'codemirror/theme/panda-syntax.css'
• 配置主题,例:

...
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      ...
      theme: 'panda-syntax',
      ...
    })
...

代码折叠设置

• 引入代码折叠js

import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';

• 配置代码折叠

    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
      ...
      gutters: [...,"CodeMirror-linenumbers","CodeMirror-foldgutter"],
      foldGutter: {
        rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.indent,CodeMirror.fold.comment)
      },
    })

最终效果

构建模块js

vue build -t lib -n JsonEditor -d public/dist/json-editor src/components/JsonEditor.vue