在 Vue 2.5 使用 JSON 編輯器套件

Vue
, ,

安裝

使用 jsoneditor 套件。

1
npm install jsoneditor

元件

建立 AppEditor 元件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
  <div>
    <v-layout
      row
      wrap
      align-center
      justify-center
    >
      <v-flex
        md5
        xs12
      >
        <div
          ref="code"
          class="editor"
        />
      </v-flex>
      <v-flex
        md1
        xs12
      >
        <v-layout
          justify-center
        >
          <div
            class="hidden-sm-and-down"
          >
            <v-icon
              x-large
              color="primary lighten-1"
              class="ma-3"
              @click="passData('code', 'tree')"
            >
              arrow_forward
            </v-icon>
            <br>
            <v-icon
              x-large
              color="primary lighten-1"
              class="ma-3"
              @click="passData('tree', 'code')"
            >
              arrow_back
            </v-icon>
          </div>
          <div
            class="hidden-md-and-up"
          >
            <v-icon
              x-large
              color="primary lighten-1"
              class="ma-3"
              @click="passData('code', 'tree')"
            >
              arrow_downward
            </v-icon>
            <v-icon
              x-large
              color="primary lighten-1"
              class="ma-3"
              @click="passData('tree', 'code')"
            >
              arrow_upward
            </v-icon>
          </div>
        </v-layout>
      </v-flex>
      <v-flex
        md5
        xs12
      >
        <div
          ref="tree"
          class="editor"
        />
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import Editor from 'jsoneditor';

export default {
  data() {
    return {
      codeEditor: {}, // 程式編輯器
      treeEditor: {}, // 樹狀編輯器
      error: '',
    };
  },
  mounted() {
    // 取得節點
    const [code, tree] = [this.$refs.code, this.$refs.tree];
    // 取得程式編輯器實例
    this.codeEditor = this.getEditor(code, 'code');
    // 取得樹狀編輯器實例
    this.treeEditor = this.getEditor(tree, 'tree');
    // 取得快取
    const data = this.getCache('data');
    // 存入快取至程式編輯器
    this.setData('code', data);
    // 存入快取至樹狀編輯器
    this.setData('tree', data);
  },
  methods: {
    // 取得編輯器實例
    getEditor(container, mode) {
      const options = {
        mode,
        modes: ['code', 'form', 'text', 'tree', 'view'],
        onError: (error) => {
          this.error = error.toString();
        },
      };
      return new Editor(container, options);
    },
    // 存入資料至快取
    setCache(key, value) {
      localStorage.setItem(key, JSON.stringify(value));
    },
    // 取得快取
    getCache(key) {
      return JSON.parse(localStorage.getItem(key)) || {};
    },
    // 存入快取至編輯器
    setData(to, value) {
      switch (to) {
        case 'code':
          this.codeEditor.set(value);
          break;
        case 'tree':
          this.treeEditor.set(value);
          break;
        default:
          break;
      }
    },
    // 取得資料
    getData(from) {
      switch (from) {
        case 'code':
          return this.codeEditor.get();
        case 'tree':
          return this.treeEditor.get();
        default:
          return {};
      }
    },
    // 傳遞資料到編輯器
    passData(from, to) {
      const value = this.getData(from);
      this.setData(to, value);
      this.setCache('data', value);
    },
  },
};
</script>

程式碼