Vue3 + Element Plus 集成 JSON Editor 实现实时校验 JSON 编辑器（高亮/暗亮主题/分栏回显/组件复用）

在中后台管理系统、配置中心、接口联调等开发场景中传统原生textarea仅支持纯文本录入难以实现语法高亮、括号匹配与实时校验JSON 格式错误往往要提交后才暴露。而社区常见 JSON 编辑方案样式固化、暗色适配差、缺乏即时回显无法满足中后台高阶交互需求。针对以上痛点本文基于 Vue3 TypeScript axolo/json-editor-vue 进行深度封装通过组件化抽离、失焦解析回显、左右分栏数据展示与暗/亮主题切换实现带语法高亮的实时校验 JSON 编辑器接到你自己的 Vue3 中后台项目里基本开箱即用。效果最终实现适配中后台管理系统的 JSON 编辑器效果包含 CodeMirror 6 语法高亮、暗/亮主题一键切换、左右分栏实时数据回显、边敲边校验与红色告警、格式化/复制/重置工具栏具备窗口自适应缩放、组件独立封装复用、TypeScript 类型补丁等特性。一、介绍1、官方包主页axolo/json-editor-vue 是一个基于 CodeMirror 6 的极简 JSON 编辑组件开箱即用、样式随包自动注入无需手动引入 CSS。包分发与版本信息可参考 npm / jsDelivrnpmaxolo/json-editor-vue - npmjsDelivraxolo/json-editor-vue CDN by jsDelivr - A CDN for npm and GitHub2、源码仓库组件底层基于 CodeMirror 6源码与示例持续维护于 GitHub可自行阅读实现细节或提 Issue源码仓库GitHub - axolo/json-editor-vue: A simple JSON editor of Vue. · GitHub3、实现效果亮点语法高亮与括号匹配基于 CodeMirror 6 引擎内置行号、括号匹配与 JSON 语法高亮编辑体验接近专业 IDE暗/亮主题一键切换内置 oneDark 暗色主题通过dark属性开关即用亮色适配浅色后台页面实时校验监听库内部编辑器实例的input事件在每次按键后立即解析当前文本非法时实时弹出红色告警避免把错误 JSON 提交到后端左右分栏实时回显左侧编辑、右侧实时回显解析后的数据JSON 非法时右侧弹出红色告警所见即所得组件化抽离复用页面独立封装于src/components/JsonEditor菜单、文案、类型声明解耦业务层仅需挂载即可使用TypeScript 类型补丁补充模块声明后自带语法提示规避 vue-tsc 类型报错代码更规范健壮自适应布局适配基于 Element Plus 栅格与弹性布局移动端自动上下堆叠宽屏左右分栏样式零配置注入包的dist已自动引入 CSS无需手动 import 样式文件二、准备工作1、安装依赖包项目需安装 axolo/json-editor-vue 核心依赖底层 CodeMirror 相关依赖codemirror/lang-json、codemirror/theme-one-dark会随包自动拉取# 安装核心依赖 npm i axolo/json-editor-vue2、示例版本本文组件适配技术版本如下兼容性稳定、可直接用于生产{ axolo/json-editor-vue: ^0.3.2, element-plus: ^2.10.2, vue: ^3.5.17, typescript: ^5.8.3, vite: ^6.3.5 }三、使用步骤1、在单页面引入组件采用分层引入方案业务组件直接引入 axolo/json-editor-vue 核心模块与 Element Plus 图标资源配合 Vue3 响应式 API 完成状态管理与事件绑定。路由层面通过懒加载异步引入页面组件降低首屏加载压力。import { ref, computed } from vue import JsonEditor from axolo/json-editor-vue import { Document, CopyDocument, RefreshLeft } from element-plus/icons-vue import { ElMessage } from element-plus注上面的代码会引入 json-editor-vue 组件及其底层 CodeMirror 6 依赖。如果你项目里vite-plugin-components/unplugin-vue-components已经自动生成了组件类型跳过后续类型声明步骤也行手写声明最稳。2、指定容器并设置布局结构采用双层容器结构外层为业务布局容器顶部工具栏左右分栏编辑区内层为编辑器渲染 DOM 容器。通过 Element Plus 栅格系统与 Tailwind CSS 原子类实现自适应宽高与响应式布局内置深色预览面板提升视觉质感。外层业务布局容器定义template div classjson-editor-page !-- 顶部操作区 -- el-card shadownever classmb-4 div classflex items-center justify-between flex-wrap gap-3 div classmin-w-0 h2 classtext-lg font-semibold text-gray-800JSON 编辑器/h2 p classtext-sm text-gray-500 mt-1 leading-relaxed 基于 CodeMirror 6 的轻量 JSON 编辑组件axolo/json-editor-vue支持语法高亮、暗色主题与实时校验。 /p /div div classflex items-center gap-3 flex-wrap el-switch v-modelisDark inline-prompt active-text暗色 inactive-text亮色 style--el-switch-on-color: #409eff changesyncJsonFromRaw / el-button typeprimary :iconDocument clickhandleFormat格式化/el-button el-button :iconCopyDocument clickhandleCopy复制/el-button el-button :iconRefreshLeft clickhandleReset重置/el-button /div /div /el-card !-- 编辑区预览区 -- el-row :gutter16 el-col :xs24 :lg14 classmb-4 lg:mb-0 el-card shadownever :body-style{ padding: 0 } classh-full JsonEditor refeditorRef :keyeditorKey v-modeljson :codectrue :darkisDark placeholder请输入 JSON 格式的数据 / /el-card /el-col el-col :xs24 :lg10 el-card shadownever header实时数据 classh-full !-- 校验状态数据预览 -- /el-card /el-col /el-row /div /template3、数据处理关键点1模块类型声明补丁该包当前版本未携带.d.ts类型声明直接import会在vue-tsc阶段报「找不到模块」。在已有的src/shims-vue.d.ts末尾补一段模块声明即可自带语法提示// axolo/json-editor-vue 当前版本未携带 TS 类型声明补充模块声明以保证类型检查通过 declare module axolo/json-editor-vue { import type { DefineComponent } from vue const JsonEditor: DefineComponent{ modelValue?: any placeholder?: string readonly?: boolean dark?: boolean codec?: boolean | any[] format?: boolean | ((json: any) any) extensions?: any[] } export default JsonEditor }2编辑器初始化与状态管理通过codectrue模式让v-model直接绑定 JS 对象而非字符串组件内部负责JSON.stringify/JSON.parse编解码。默认数据采用对象形态包含多层嵌套结构以完整展示语法高亮效果支持自定义替换后端接口数据实时文本rawText由编辑器每次内容变化时同步驱动作为预览与校验的唯一可信源// 深拷贝工具避免使用 structuredClone 以兼容更多运行环境 const clone T,(value: T): T JSON.parse(JSON.stringify(value)) as T // 默认 JSON 数据对象形态配合 codectrue 使用 const defaultJson { required: true, message: 请输入内容, options: [email, phone], rules: { min: 6, max: 20 } } const initialText JSON.stringify(clone(defaultJson), null, 2) // codectrue 时v-model 绑定的是 JS 对象rawText 是编辑器实时写入的当前文本 const json refany(clone(defaultJson)) const isDark refboolean(false) // 库组件实例其内部维护着真正创建的 CodeMirror EditorView见 editorRef.value.editor const editorRef refany(null) const rawText refstring(initialText) // 切换暗色时强制重建编辑器以应用主题 const editorKey computed(() (isDark.value ? dark : light))3实时解析与回显派生axolo/json-editor-vue只在onblur时回写v-model并触发change/error预览与复制都会卡在上一次失焦那一刻。最初尝试用 CodeMirror 的updateListener扩展extensionsprop实时取文本实测发现并不生效——原因是该库的 dist 打包时内联了一份codemirror/view外部传入的扩展属于另一份实例facet 不匹配会被静默忽略预览与复制依旧停留在初始值。稳妥的解法是绕开扩展机制用ref拿到库组件实例直接监听其内部EditorView.contentDOM的input事件同步文本。注意input触发时 CodeMirror 的state.doc还是异步更新的旧值同步读会丢字所以改从 DOM 行节点.cm-line重建文本——DOM 在输入瞬间即最新快速连续输入也不丢内容。预览与错误信息由computed从rawText实时派生做到「边敲边看」// 实时解析每次 rawText 变化都重算非法时直接抛错让上层渲染告警 const parsed computed{ ok: boolean; value?: any; error?: string }(() { try { return { ok: true, value: JSON.parse(rawText.value) } } catch (e) { return { ok: false, error: (e as Error).message } } }) const previewText computed(() parsed.value.ok ? JSON.stringify(parsed.value.value, null, 2) : rawText.value ) const errorMsg computed(() (parsed.value.ok ? : parsed.value.error || JSON 格式有误)) // —— 实时同步的核心绕开 extensions 机制—— // 直接拿库内部创建的 EditorView 实例监听 contentDOM 的 input 事件。 // input 触发时 DOM 已是最新而 state.doc 是异步更新的旧值同步读会丢字 // 因此从 .cm-line 行节点重建文本快速连续输入也不丢内容。 const syncFromEditor () { const ed editorRef.value?.editor if (ed) { const lines ed.contentDOM.querySelectorAll(.cm-line) const text Array.from(lines, (l) (l as HTMLElement).textContent || ).join(\n) if (text ! rawText.value) rawText.value text } } const bindEditorListener () { const ed editorRef.value?.editor if (ed !ed.__jsonSyncBound) { ed.__jsonSyncBound true ed.contentDOM.addEventListener(input, syncFromEditor) } } // 兜底轮询setup 执行即启动即使 HMR 保留旧实例 / input 监听未绑定 // 也能在 150ms 内把 DOM 最新文本同步到 rawText保证预览、复制、格式化永远基于当前内容。 let syncTimer: ReturnTypetypeof setInterval | null null const startSyncPolling () { if (syncTimer) return syncTimer setInterval(syncFromEditor, 150) } startSyncPolling() // 子组件库组件先于父组件完成 mounted此时 editor 已就绪可直接绑定 onMounted(bindEditorListener) onBeforeUnmount(() { if (syncTimer) { clearInterval(syncTimer) syncTimer null } }) // 暗色切换时 :key 重建库组件ref 指向新实例 → 重新绑定监听post确保新实例已挂载完成。 // immediate:true 兜底任何时序问题HMR / 父组件复用等场景。 watch(editorRef, () bindEditorListener(), { flush: post, immediate: true })4暗色主题切换机制主题oneDark仅在mounted时决定运行时改dark不会即时换肤。解决方法是用:key绑定暗色状态切换时让组件重挂载——代价只是丢失当前光标位置对切主题这个动作完全可接受。为避免重建前丢掉未失焦的编辑change回调里先做一次实时文本 → json的同步// 切换暗色时强制重建编辑器以应用主题重建前会先把当前文本同步进 json const editorKey computed(() (isDark.value ? dark : light)) // 切换主题前把当前编辑器文本同步进 json若内容非法则放弃未提交编辑回退到上一份有效内容 const syncJsonFromRaw () { try { const parsed JSON.parse(rawText.value) json.value parsed rawText.value JSON.stringify(parsed, null, 2) } catch { rawText.value JSON.stringify(json.value, null, 2) } }5工具方法封装内置格式化、复制到剪贴板、重置三项工具操作开箱即用无需业务层额外封装。复制走rawText保证你修改了啥就复制啥格式化基于实时文本重新解析后回写非法输入时直接拒绝。注意格式化 / 重置是程序化回写不触发input事件所以回写后要手动同步一次rawText// 格式化基于当前实时文本解析后以 2 空格缩进回写程序化 dispatch 不触发 input手动同步 rawText const handleFormat () { const p parsed.value if (!p.ok) { ElMessage.error(当前 JSON 格式有误无法格式化 (p.error || )) return } json.value clone(p.value) rawText.value JSON.stringify(p.value, null, 2) ElMessage.success(已格式化) } const handleReset () { json.value clone(defaultJson) rawText.value initialText ElMessage.success(已重置为默认数据) } const handleCopy async () { try { await navigator.clipboard.writeText(rawText.value) ElMessage.success(已复制当前编辑器内容) } catch { ElMessage.error(复制失败请手动复制) } }四、完整可复用源码1、JSON 编辑器业务组件 /components/JsonEditor/Index.vuetemplate div classjson-editor-page !-- 顶部操作区 -- el-card shadownever classmb-4 div classflex items-center justify-between flex-wrap gap-3 div classmin-w-0 h2 classtext-lg font-semibold text-gray-800JSON 编辑器/h2 p classtext-sm text-gray-500 mt-1 leading-relaxed 基于 CodeMirror 6 的轻量 JSON 编辑组件axolo/json-editor-vue支持语法高亮、暗色主题与实时校验。 /p /div div classflex items-center gap-3 flex-wrap el-switch v-modelisDark inline-prompt active-text暗色 inactive-text亮色 style--el-switch-on-color: #409eff changesyncJsonFromRaw / el-button typeprimary :iconDocument clickhandleFormat格式化/el-button el-button :iconCopyDocument clickhandleCopy复制/el-button el-button :iconRefreshLeft clickhandleReset重置/el-button /div /div /el-card !-- 编辑区预览区 -- el-row :gutter16 el-col :xs24 :lg14 classmb-4 lg:mb-0 el-card shadownever :body-style{ padding: 0 } classh-full !-- key 绑定 isDark组件在 mounted 时才应用主题切换暗色时通过变更 key 强制重建编辑器从而即时生效。 -- JsonEditor refeditorRef :keyeditorKey v-modeljson :codectrue :darkisDark placeholder请输入 JSON 格式的数据 / /el-card /el-col el-col :xs24 :lg10 el-card shadownever header实时数据 classh-full el-alert v-iferrorMsg typeerror :closablefalse show-icon titleJSON 解析失败 :descriptionerrorMsg classmb-3 / el-alert v-else typesuccess :closablefalse show-icon titleJSON 格式有效 classmb-3 / pre classpreview{{ previewText }}/pre /el-card /el-col /el-row /div /template script setup langts namejsonEditor import { ref, computed, onMounted, onBeforeUnmount, watch } from vue import JsonEditor from axolo/json-editor-vue import { Document, CopyDocument, RefreshLeft } from element-plus/icons-vue import { ElMessage } from element-plus // 深拷贝工具避免使用 structuredClone 以兼容更多运行环境 const clone T,(value: T): T JSON.parse(JSON.stringify(value)) as T // 默认 JSON 数据对象形态配合 codectrue 使用 const defaultJson { required: true, message: 请输入内容, options: [email, phone], rules: { min: 6, max: 20 } } const initialText JSON.stringify(clone(defaultJson), null, 2) // codectrue 时v-model 绑定的是 JS 对象而非字符串主要用于「格式化 / 重置」时把新值回写进编辑器 const json refany(clone(defaultJson)) const isDark refboolean(false) // 库组件实例其内部维护着真正创建的 CodeMirror EditorView见 editorRef.value.editor const editorRef refany(null) // 实时文本每次编辑器内容变化后立即同步作为预览与校验的唯一可信源 const rawText refstring(initialText) // 切换暗色时强制重建编辑器以应用主题重建前会先把当前文本同步进 json避免丢失未提交的编辑 const editorKey computed(() (isDark.value ? dark : light)) // 以 rawText 为唯一可信源实时解析、派生预览与错误信息 const parsed computed{ ok: boolean; value?: any; error?: string }(() { try { return { ok: true, value: JSON.parse(rawText.value) } } catch (e) { return { ok: false, error: (e as Error).message } } }) const previewText computed(() parsed.value.ok ? JSON.stringify(parsed.value.value, null, 2) : rawText.value ) const errorMsg computed(() (parsed.value.ok ? : parsed.value.error || JSON 格式有误)) // —— 实时同步的核心绕开 extensions 机制—— // axolo/json-editor-vue 的 dist 打包时内联了一份 codemirror/view // 若通过 extensions prop 传入 updateListener它属于另一份实例facet 不匹配会被静默忽略 // 表现为「预览/复制永远停留在初始值」。因此这里直接拿库内部创建的 EditorView 实例 // 监听其 contentDOM 的 input 事件。input 触发时 DOM 已是最新而 state.doc 是异步更新的 // 旧值同步读会丢字故从 .cm-line 行节点重建文本快速连续输入也不丢内容。 const syncFromEditor () { const ed editorRef.value?.editor if (ed) { const lines ed.contentDOM.querySelectorAll(.cm-line) const text Array.from(lines, (l) (l as HTMLElement).textContent || ).join(\n) if (text ! rawText.value) rawText.value text } } const bindEditorListener () { const ed editorRef.value?.editor if (ed !ed.__jsonSyncBound) { ed.__jsonSyncBound true ed.contentDOM.addEventListener(input, syncFromEditor) } } // 兜底轮询setup 执行即启动即使 HMR 保留旧实例 / input 监听未绑定 // 也能在 150ms 内把 DOM 最新文本同步到 rawText保证预览、复制、格式化永远基于当前内容。 let syncTimer: ReturnTypetypeof setInterval | null null const startSyncPolling () { if (syncTimer) return syncTimer setInterval(syncFromEditor, 150) } startSyncPolling() // 子组件库组件先于父组件完成 mounted此时 editor 已就绪可直接绑定 onMounted(bindEditorListener) onBeforeUnmount(() { if (syncTimer) { clearInterval(syncTimer) syncTimer null } }) // 暗色切换时 :key 重建库组件ref 指向新实例 → 重新绑定监听post确保新实例已挂载完成。 // immediate:true 兜底任何时序问题HMR / 父组件复用等场景。 watch(editorRef, () bindEditorListener(), { flush: post, immediate: true }) // 切换主题前把当前编辑器文本同步进 json若内容非法则放弃未提交编辑回退到上一份有效内容 const syncJsonFromRaw () { try { const parsed JSON.parse(rawText.value) json.value parsed rawText.value JSON.stringify(parsed, null, 2) } catch { rawText.value JSON.stringify(json.value, null, 2) } } // 格式化基于当前实时文本解析后以 2 空格缩进回写程序化 dispatch 不触发 input手动同步 rawText const handleFormat () { const p parsed.value if (!p.ok) { ElMessage.error(当前 JSON 格式有误无法格式化 (p.error || )) return } json.value clone(p.value) rawText.value JSON.stringify(p.value, null, 2) ElMessage.success(已格式化) } const handleReset () { json.value clone(defaultJson) rawText.value initialText ElMessage.success(已重置为默认数据) } const handleCopy async () { try { await navigator.clipboard.writeText(rawText.value) ElMessage.success(已复制当前编辑器内容) } catch { ElMessage.error(复制失败请手动复制) } } /script style scoped .json-editor-page { padding: 16px; } .preview { margin: 0; max-height: 460px; overflow: auto; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.6; font-family: Consolas, Courier New, monospace; white-space: pre; } /* 让编辑器与卡片融为一体 */ :deep(.axolo-json-editor) { border: none; border-radius: 0; } :deep(.axolo-json-editor .editor .cm-editor) { min-height: 460px; } :deep(.axolo-json-editor .editor .cm-scroller) { font-family: Consolas, Courier New, monospace; } /style补充说明本组件页面样式基于 Element Plus Tailwind CSS 原子类开发若无相关依赖可直接替换为原生 CSS 样式不影响编辑器的语法高亮、主题切换、数据解析与实时回显等核心功能与交互逻辑Tailwind CSS 可参考CSS框架 - Tailwind CSS - 附示例-CSDN博客。本示例基于 axolo/json-editor-vue v0.3.2 开发底层依托 CodeMirror 6 开源编辑引擎强劲能力支持语法高亮、括号匹配、行号显示等特性可放心用于各类正式项目。编辑器配色、主题切换、预览面板样式等参数均支持自定义拓展可快速适配不同风格的中后台管理系统界面主题。组件完全解耦、复用性极强基于 Vue3 TS 完整类型约束开发支持父组件动态传参通过v-model双向绑定搭配深度监听逻辑可实现数据变更实时刷新预览兼容性优异可直接复用至任意 Vue3 Vite TS 技术栈项目。format属性当前版本仍为 TODO 状态官方尚未实现内置格式化功能本文通过「重新赋值 ref → 触发组件内部 watch → 以 2 空格缩进重写文档」的方式绕行实现简单可靠效果一致。五、核心模块解析1、编辑器集成核心优化通过key绑定暗色状态切换主题时强制重建编辑器实例规避 CodeMirror 仅在mounted应用主题的限制实现暗/亮即时换肤样式随包自动注入无需手动importCSSVite 构建时由dist/index.js内联引入零配置接入补充shims-vue.d.ts模块声明规避vue-tsc「找不到模块」报错组件调用自带语法提示codectrue时v-model直接绑定 JS 对象组件内部负责JSON.stringify/JSON.parse业务层无需手动编解码2、实时解析回显核心亮点实时解析回显监听库内部编辑器实例的input事件 Vuecomputed在每次按键后即时解析rawText派生预览文本与错误状态非法 JSON 立即弹红色告警左右分栏实时回显右侧面板随编辑结果同步刷新JSON 非法时弹出红色el-alert告警合法时显示绿色提示所见即所得工具方法齐备内置格式化、复制到剪贴板、重置为默认数据开箱即用无需业务层额外封装暗色切换零丢失仅丢失当前光标位置对「切主题」动作完全可接受无副作用六、性能优化方案组件复用编辑器封装为独立业务组件全站统一复用消除重复样板代码按需加载路由懒加载异步引入页面减少首屏 JS 打包体积自适应布局Element Plus 栅格弹性布局移动端自动上下堆叠宽屏左右分栏无需额外媒体查询样式零成本CSS 随包注入无额外样式文件与构建开销依赖精简仅依赖 CodeMirror 轻量内核无冗余运行时监听渲染开销低七、二次扩展适配指南默认数据替换修改defaultJson或对接后端接口数据后传入v-model自动监听重绘暗色默认开启将isDark初始值置为true首屏即为暗色编辑器只读模式传入readonly属性适用于展示型场景如接口响应查看自定义编解码将codec传为[encode, decode]数组实现非标准 JSON 的双向转换扩展 CodeMirror通过extensions属性注入额外插件如搜索、折叠增强编辑能力实时校验默认即边敲边校验若想换成编辑完再校验可改为监听rawText的watch节流或直接通过validate/formatter自定义八、总结本文基于 Vue3 TypeScript Element Plus 与 axolo/json-editor-vue实现了一套即插即用的 JSON 编辑组件。通过左右分栏、语法高亮、暗/亮主题切换与实时校验把写和看拆开错误在提交后端前就能拦住。组件收在src/components/JsonEditor下菜单、文案、类型各自独立可直接挂进任意中后台项目。两点踩坑提醒该库现版本尚未自带 TS 类型记得补一份 shims 声明内置格式化仍是 TODO不过用「重新赋值触发 watch」这个绕行法实测稳定可放心用。欢迎关注【前端小知识营地】

Vue3 + Element Plus 集成 JSON Editor 实现实时校验 JSON 编辑器（高亮/暗亮主题/分栏回显/组件复用） - 附完整示例

相关推荐

SSM个人健康管理小程序25397-计算机课程设计、毕业设计

【关注可白嫖源码】--课程设计+毕业设计+springboot高校选课管理系统[编号：project46393]（案例分析）

Python文件操作基础：打开、读写与关闭文件

更多资讯

启动报Port 8088 was already in use？先查是谁占的

担心文档上云？本地运行的办公AI才敢放心用

先能用，再好用：从烂尾复盘到两周上线，全栈项目的‘原型—快速迭代‘方法论

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%：对照 Gemini 3 Pro 的三份能力评测，看‘会思考‘改写了哪些边界

1.c++入门篇

《江灯合声》：有可行的分框版，也仍可以选择连续鸣谢

今日更新

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本周精选

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？