Vue：Bin Code Editor格式化JSON编辑器

<template>
  <div class="bin-code-editor">
    <codemirror v-model="editorValue" :options="editorOptions"></codemirror>
  </div>
</template>
 
<script>
import { codemirror } from 'vue-codemirror-lite'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
 
export default {
  components: {
    codemirror
  },
  data() {
    return {
      editorValue: '',
      editorOptions: {
        mode: 'application/json',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleActiveLine: true,
        matchBrackets: true,
        autoCloseBrackets: true,
        matchTags: true,
        autoRefresh: true
      }
    }
  },
  methods: {
    formatJson() {
      try {
        const formattedJson = JSON.stringify(JSON.parse(this.editorValue), null, 2);
        this.editorValue = formattedJson;
      } catch (e) {
        console.error('Error formatting JSON:', e);
      }
    }
  }
}
</script>
 
<style>
.bin-code-editor {
  height: 100%;
  position: relative;
}
</style>

这个代码实例展示了如何在Vue应用中集成vue-codemirror-lite组件，并实现了一个简单的JSON编辑器。通过formatJson方法，用户可以轻松地格式化JSON代码。这个例子提供了基本的错误处理，以防输入的JSON无法解析。