API 參考

本頁列出 JSONEditor 與 JSONEditorNode 的完整公開介面。

JSONEditor

new JSONEditor(config)

參數	型別	必填	預設值	說明
`id`	`string`	否	—	掛載目標的 DOM 元素 id；省略則建立新的 `<section>`（不會自動掛載到頁面）
`title`	`string`	否	`""`	於 `<header>` 中顯示的編輯器標題
`description`	`string`	否	`""`	於 `<header>` 中顯示的編輯器描述
`fill`	`boolean`	否	`true`	是否設定 `data-fill="1"` 以填滿容器
`readonly`	`boolean`	否	`false`	是否以唯讀模式啟動（見核心概念的唯讀機制說明）
`collapsed`	`boolean`	否	`true`	所有節點的初始折疊狀態
`confirmKeyRemove`	`boolean`	否	`true`	移除節點前是否顯示 `confirm()` 對話框
`css`	`string`	否	CDN URL	自訂 CSS 路徑，覆蓋預設注入的樣式表
`json`	`object`	否	`{}`	以 JavaScript 物件表示的初始資料
`file`	`File \| string`	否	—	初始資料來源（File 物件或 URL 字串）；與 `json` 互斥擇一
`path`	`string`	否	—	當傳入 URL 字串時 `file` 的別名
`button.import`	`boolean`	否	`true`	顯示匯入按鈕
`button.export`	`boolean`	否	`true`	顯示匯出按鈕
`button.reset`	`boolean`	否	`true`	顯示重設按鈕
`when.beforeRender`	`() => boolean\|void`	否	—	見生命週期鉤子
`when.rendered`	`() => void`	否	—	同上
`when.beforeUpdate`	`() => boolean\|void`	否	—	同上
`when.updated`	`() => void`	否	—	同上
`when.beforeDestroy`	`() => boolean\|void`	否	—	同上（目前未被自動呼叫，見生命週期鉤子頁說明）
`when.destroyed`	`() => void`	否	—	同上（同上，未被自動呼叫）

成員	型別	說明
`json`	`getter → string`	序列化目前資料為 4 空格縮排 JSON 字串；根層無鍵子節點會被忽略（見核心概念）
`type`	`getter → string`	根節點型別（`"object"` 或 `"array"`）
`children`	`JSONEditorNode[]`	頂層子節點陣列
`body`	`HTMLElement`	編輯器根 DOM 元素
`editor`	`HTMLElement`	節點容器 DOM 元素（`<section>`）
`import(data)`	`async method`	匯入新資料（`Object` / `File` / URL `string`）並重新渲染（`render(true)`，會觸發 `Lifecycle.update`）
`export()`	`method`	下載格式化 JSON；檔名為 `NanoJSON-{timestamp}.json`；根層單一無鍵子節點也會被寫入（與 `json` getter 行為不同）
`reset()`	`method`	等同 `import({})`
`enable()`	`method`	停用唯讀模式；對整棵已渲染 DOM 移除 `disabled` 屬性
`disable()`	`method`	啟用唯讀模式；對整棵已渲染 DOM 加上 `disabled` 屬性
`render(isUpdate?)`	`method`	重新渲染所有節點；僅當 `isUpdate === true` 且已完成初次渲染時觸發 `Lifecycle.update`
`insert()`	`method`	於根層級新增一個空節點（型別預設 `"string"`）

節點由 JSONEditor 內部建立與管理，通常不需直接建構；以下為可安全存取的公開成員。

屬性	型別	說明
`key`	`string`	節點鍵名；陣列子節點為空字串
`type`	`string`	`"string"` / `"number"` / `"boolean"` / `"object"` / `"array"` / `"null"`
`value`	`string`	原始節點值（僅非容器型別有效）
`parent`	`JSONEditor \| JSONEditorNode`	父節點參照
`children`	`JSONEditorNode[]`	子節點陣列（僅 `object` / `array` 型別有效）
`collapsed`	`boolean`	目前折疊狀態

方法	說明
`render()`	渲染並回傳此節點的 DOM 元素（呼叫私有 `#create()`）
`addChild()`	新增一個空子節點並更新 DOM
`updateChild()`	重建 DOM 並觸發 `Lifecycle.update`
`setCollapsed()`	切換折疊狀態並重新渲染
`json`（getter）	回傳此節點對應的 JavaScript 值（遞迴），依 `type` 做對應轉換

型別	JavaScript 值	備註
`string`	`String`	文字值；輸入框以 `textarea` 呈現，支援多行
`number`	`Number`	切換為此型別時，會嘗試 `parseFloat` 既有字串值；無法解析則清空
`boolean`	`Boolean`	以下拉選單在 `"true"` / `"false"` 間選擇
`object`	`Object`	支援無限巢狀；切換為此型別且無子節點時會自動 `addChild()`
`array`	`Array`	同上；子節點以索引顯示，無 `key` 輸入框
`null`	`null`	僅物件鍵值可穩定產生此型別節點，陣列項目為 `null` 時型別系統行為不同，見核心概念