FxJsonEditor JSON 编辑器

基于 CodeMirror 6 的 JSON 编辑器：v-model 双向绑定 JSON 字符串、实时校验（非法时错误行标红 + 波浪线）、内置工具栏（撤销/重做/折叠/格式化/压缩/全屏/复制）、覆盖式滚动条、--fje-* 主题契约。

基础用法

<FxJsonEditor v-model="basicJson" height="320px" />
<script setup>
  import { ref } from "vue"
  const basicJson = ref(JSON.stringify({
    name: 'fx-admin',
    test3: 'test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3',
    components: ['FxJsonEditor'],
    test: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
    },
    test2: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
      test: {
        name: 'fx-admin',
        components: ['FxJsonEditor'],
      },
    },
  }, null, 2))
</script>

工具栏与格式化

非只读时顶部自带工具栏（撤销/重做/折叠切换/格式化/压缩/全屏/复制）。动作结果经 error-first 的 action-callback 抛给消费方提示，组件本身不内置任何提示 UI；format / minify 也可通过组件实例直接调用。

<FxJsonEditor ref="actionEditor" v-model="actionJson" height="320px" :action-callback="onAction" />
<script setup>
  import { ref } from "vue"
  const actionJson = ref(JSON.stringify({
    name: 'fx-admin',
    test3: 'test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3',
    components: ['FxJsonEditor'],
    test: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
    },
    test2: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
      test: {
        name: 'fx-admin',
        components: ['FxJsonEditor'],
      },
    },
  }, null, 2))
  const onAction = (error, event) => {
    // error 非空 = 动作未生效（如非法 JSON 无法格式化）；提示由消费方自行处理
    console.log("action:", event.action, error)
  }
</script>

只读

只读保留工具栏（自动隐藏撤销/重做/格式化/压缩等写回类动作，保留折叠/全屏/复制），内部不可变更、可选中复制。

<FxJsonEditor v-model="readonlyJson" readonly height="320px" />
<script setup>
  import { ref } from "vue"
  const readonlyJson = ref(JSON.stringify({
    name: 'fx-admin',
    test3: 'test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3',
    components: ['FxJsonEditor'],
    test: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
    },
    test2: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
      test: {
        name: 'fx-admin',
        components: ['FxJsonEditor'],
      },
    },
  }, null, 2))
</script>

禁用

禁用与只读同一工具栏裁剪，整体置灰。

<FxJsonEditor v-model="readonlyJson2" disabled height="320px" />
<script setup>
  import { ref } from "vue"
  const readonlyJson2 = ref(JSON.stringify({
    name: 'fx-admin',
    test3: 'test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3',
    components: ['FxJsonEditor'],
    test: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
    },
    test2: {
      name: 'fx-admin',
      components: ['FxJsonEditor'],
      test: {
        name: 'fx-admin',
        components: ['FxJsonEditor'],
      },
    },
  }, null, 2))
</script>

主题

组件走 --fje-* 主题契约：包内不引用任何外部令牌（所有视觉值都是 var(--fje-*, 字面量)，独立发包即内置中性亮色主题）；theme prop 传入配置即可整体换肤（纯对象 / ref / computed / getter 函数皆可，值可直接写 var(--fx-*) 令牌，亮暗自动跟随）。

<script setup lang="ts">
import { FxJsonEditor, type JsonEditorTheme } from '@fx-core/json-editor'

const editorTheme: JsonEditorTheme = {
  bg: 'var(--fx-bg-color)',
  text: 'var(--fx-text-color-primary)',
  border: 'var(--fx-color-border-control)',
  primary: 'var(--fx-color-primary)',
  danger: 'var(--fx-color-danger)',
}
</script>

<template>
  <FxJsonEditor v-model="text" :theme="editorTheme" />
</template>

校验反馈

非法 JSON 有三层反馈：错误行内标红（波浪线 + gutter 图标，悬浮气泡可读全文）→ 状态栏上方独立错误行（解析错误文案持续可见，超长省略）→ 消费方阻断（@status 携带 { valid, message }，可据此禁用提交）。

<FxJsonEditor
  v-model="invalidText"
  :error="!jsonValid"
  height="320px"
  @status="(s) => (jsonValid = s.valid)"
/>
<script setup>
  import { ref } from "vue"
  const invalidText = ref('{"broken": true,}')
  // jsonValid 可用于禁用提交按钮等；error 让编辑器边框同步转红
  const jsonValid = ref(false)
</script>

错误行的展示位置可用 error-placement（inside 默认 / outside 组件整体下方）调整；不需要组件内错误行时传 :show-status-error="false"，自行消费 @status。

Props

属性	类型	默认值	说明
modelValue	string	''	绑定值，JSON 字符串（v-model）
width	string	'100%'	组件宽度
height	string	''	固定高度（优先级最高，作用整个组件）
minHeight	string	'120px'	最小高度（随内容自动长高）
maxHeight	string	'480px'	最大高度（超出后编辑器内部滚动）
readonly	boolean	false	只读：可选中复制、无工具栏
disabled	boolean	false	禁用：整体置灰（强于 readonly）
placeholder	string	''	占位提示
theme	JsonEditorThemeInput	—	主题配置（纯对象 / ref / computed / getter）
actions	JsonEditorToolbarAction[]	全部	工具栏动作与顺序
actionCallback	(error: Error | null, event) => void	—	工具栏动作回调（error-first）
showStatusError	boolean	true	无效 JSON 错误行是否组件内展示
error	boolean	false	错误态：根边框转 danger 色（消费方动态绑定）
errorPlacement	'inside' | 'outside'	'inside'	错误行位置（inside 组件内 / outside 组件下方）

Events

事件	回调参数	说明
update:modelValue	string	JSON 文本变化时触发
status	{ valid: boolean, message: string }	校验状态（挂载时与每次文本变化始终抛出）
actionCallback	(error: Error | null, event) => void	工具栏动作结果（error-first，prop 传入）

Expose

方法	说明
format	格式化（合法时格式化并回写）
minify	压缩（合法时去空白回写）