Vue2中使用CodeMirror 实现JSON编辑器

本文主要是介绍Vue2中使用CodeMirror 实现JSON编辑器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

将如下代码封装成JsonEditor组件

<template>
  <div class="json-editor">
    <el-row style="height: 100%;overflow-y: auto;">
      <textarea ref="codemirror"/>
    </el-row>
    <slot></slot>
  </div>
</template>

<script>
// 引入CodeMirror和基础样式
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
// JSON代码高亮需要由JavaScript插件支持
import "codemirror/mode/javascript/javascript.js";
// 选择IDEA主题样式，还有其他很多主题可选
import "codemirror/theme/idea.css";
// 支持使用Sublime快捷键
import "codemirror/keymap/sublime.js";
// 搜索功能的依赖
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
// 支持搜索功能
import "codemirror/addon/search/search";
import "codemirror/addon/search/searchcursor.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/comment-fold.js";
// 支持代码区域全屏功能
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/display/fullscreen.js";
// 支持括号自动匹配
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/edit/closebrackets.js";
// 支持代码自动补全
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
// 行注释
import "codemirror/addon/comment/comment.js";
// JSON错误检查
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";
// 需要依赖全局的jsonlint，不是很优雅
import "codemirror/addon/lint/json-lint.js";
//及时自动更新，配置里面也需要设置autoRefresh为true
import 'codemirror/addon/display/autorefresh';
// 引入jsonlint
import jsonlint from "jsonlint-mod";
window.jsonlint = jsonlint;

export default {
  name: "JsonEditor",
  /* eslint-disable vue/require-prop-types */
  props: {
    value: [String, Number, Object, Array],
    readOnly: [Boolean],
  },
  data() {
    return {
      jsonEditor: false
    };
  },
  // 监听是否数据改变，随时更新json数据
  watch: {
    value(value) {
      // console.log(value);
      const editorValue = this.jsonEditor.getValue();
      if (value !== editorValue) {
        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
      }
      this.jsonEditor.refresh()
    },
  },
  mounted() {
    // CodeMirror的配置项，搜官网看这里的配置项配置
    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.codemirror, {
      mode: "application/json",  // 接受的类型，json xml....
      smartIndent: true, // 是否智能缩进
      styleActiveLine: true, // 当前行高亮
      lineNumbers: true, // 是否显示行数
      indentUnit: 2, // 缩进单位，默认2
      gutters: [
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
        "CodeMirror-lint-markers",      // CodeMirror-lint-markers是实现语法报错功能
      ],
      lint: true,
      //lineWrapping: true, // 自动换行
      matchBrackets: true, // 括号匹配显示
      autoCloseBrackets: true, // 输入和退格时成对
      readOnly: this.readonly, // 只读
      foldGutter: true,
      autoRefresh: true
    });

    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
    this.jsonEditor.on("change", cm => {
      this.$emit("changed", cm.getValue());
      // this.$emit('input', cm.getValue())
      // 编辑json框里面的内容可以时刻监听到值，通过cm.getValue()获取到
    });
  },
  methods: {
    getValue() {
      return this.jsonEditor.getValue();
    },
  }
};
</script>

<style scoped>
.json-editor {
  height: 100%;
  position: relative;
}
.json-editor >>> .CodeMirror {
  height: auto;
  min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll {
  min-height: 300px;
}
</style>

可以使用如下方式调用

<JsonEditor ref="jsonEditor" v-model="jsonValue">
  <el-row type="flex" justify="center" style="margin-top: 10px">
    <el-button type="primary" @click="onJsonSave" size="mini">保存</el-button>
  </el-row>
</JsonEditor>

通过定义的getValue获取json值

onJsonSave(){
  let value = this.$refs.jsonEditor.getValue()
  if (this.jsonValue !== value) {
    this.jsonValue = value;
  }
}

这篇关于Vue2中使用CodeMirror 实现JSON编辑器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！