json‐editor for vue

JSON Editor 에디터를 vue.js 컴포넌트로 만들어서 사용할 수 있습니다.
에디터를 vue 컴포넌트로 감싸서 사용하여 기능을 이용합니다.

component source

json-editor.vue

<template>
<div ref="$editor"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import JsonEditor from '@redgoose/json-editor'
import '@redgoose/json-editor/css'

const $editor = ref()
const props = defineProps({
  modelValue: { type: [ Object, Array ], default: {} },
  live: { type: Boolean, default: false },
  theme: { type: String, default: 'system' },
})
const emits = defineEmits([ 'init', 'context', 'update:modelValue' ])
let editor

function core()
{
  return editor
}

function onUpdateEditor({ detail })
{
  emits('update:modelValue', detail)
}

function onContextEditor(e)
{
  emits('context', e.detail)
}

function change(src)
{
  emits('update:modelValue', src)
  editor.replace(src, {}, true)
}

onMounted(() => {
  editor = new JsonEditor($editor.value, {
    live: props.live,
    theme: props.theme,
  })
  $editor.value.addEventListener('update', onUpdateEditor)
  $editor.value.addEventListener('context', onContextEditor)
  editor.replace(props.modelValue, {}, false)
  emits('init', editor)
})

onBeforeUnmount(() => {
  $editor.value.removeEventListener('update', onUpdateEditor)
  $editor.value.removeEventListener('context', onContextEditor)
  editor.destroy()
  $editor.value.innerHTML = ''
})

watch(() => props.live, value => {
  editor.options.live = value
})
watch(() => props.theme, value => {
  editor.options.theme = value
})

defineExpose({
  core,
  change,
})
</script>

먼저 이렇게 vue 파일을 작성하여 보관해 둡니다.
이 컴포넌트 파일을 사용하여 에디터로 쓰게 될것입니다.

usage

먼저 패키지를 설치합니다.

npm install @redgoose/json-editor

패키지를 설치한 후에 만들어뒀던 래퍼 vue 컴포넌트를 불러와서 사용합니다.

<template>
<JsonEditor/>
</template>
<script>
import JsonEditor from 'json-editor.vue'
</script>

props

• modelValue: 데이터 값 (마운트 하는 시점에만 에디터에 적용됩니다!)
• theme: 다크모드에 대한 값
• live: 데이터가 업데이트 될때마다 update이벤트를 실행할지에 대한 여부

modelValue props값과 에디터의 내용은 서로 분리되어 있기 때문에 값이 변한다고 에디터에 자동으로 업데이트 되지 않습니다.
에디터의 내용은 그대로 두고 외부에서 에디터의 내용을 변경하려면 change()메서드를 사용하거나 라이브러리 메서드를 이용하는것을 권장드립니다.

method

core

에디터 인스턴스를 가져옵니다. 이 인스턴스로 에디터의 기능을 이용할 수 있습니다.

let editor = component.core()

change

데이터 내용을 변경합니다.
속성과 에디터의 내용을 강제로 변경하기 때문에 주의해주세요.

component.change({ foo: 'bar' })

emit

init

에디터 컴포넌트를 시작할때 호출되는 이벤트. 에디터 인스턴스를 가져올 수 있습니다.

<JsonEditor @init="(instance) => {}"/>

update:modelValue

에디터의 데이터가 변했을때 호출합니다.

<JsonEditor @update:modelValue="(data) => {}"/>

context

컨텍스트 메뉴가 열리면 호출합니다.

<JsonEditor
  @context="(e) => {
    const { body, node, type, isRoot, $ } = e
  }"
/>

demo code

마지막으로 테스트로 작성한 컴포넌트를 불러오는 데모와 프로젝트를 남겨둡니다.

<template>
<div class="editor">
  <JsonEditor
    ref="$jsonEditor"
    v-model="source"
    theme="light"
    :live="true"
    @init="onInit"
    @update:modelValue="onUpdate"
    @context="onContext"/>
</div>
<div class="preview">
  <pre>{{preview}}</pre>
</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import JsonEditor from './json-editorindex.vue'

const $jsonEditor = ref()
let editor
const source = ref({
  foo: 'bar',
  apple: 'red',
  banana: 'yellow',
  mango: false,
  pear: null,
})
const preview = computed(() => {
  return JSON.stringify(source.value, null, 2)
})

function onInit(instance)
{
  console.log('onInit', instance)
  editor = instance
}

function onUpdate(updatedData)
{
  console.log('onUpdate', updatedData)
}

function onContext(e)
{
  const { body, node, type, isRoot, $ } = e
  console.log('onContext', e)
}
</script>

project file

vue-demo.zip