ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue2中使用CodeMirror 实现JSON编辑器

2022-04-12 21:32:50  阅读:755  来源: 互联网

标签:true CodeMirror js JSON Vue2 import codemirror addon


将如下代码封装成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;
  }
}

标签:true,CodeMirror,js,JSON,Vue2,import,codemirror,addon
来源: https://www.cnblogs.com/proboxdu/p/16137537.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有