json資料庫編輯器（js json編輯器）

• 1、react–實現簡易json編輯器
• 2、求JSON Viewer編輯器免安裝版下載
• 3、json精靈編輯器載入失敗

分析

     由於個人不太喜歡一切皆props的形式，故想要做到一些公共api既可以在內部調用又可以對外部暴漏，類組件使用高階/裝飾器,函數組件使用hooks，我這裡使用方式二，對外提供useEditor

     json預覽

            通過原生標籤的contentEditable屬性可以實現在線json編輯    

            通過pre標籤並利用JSON.stringify的參數3實現格式化預覽  

            通過監聽input事件實現編輯監聽  

     樹形編輯

            借用antd的tree組件快速實現樹形ui展示

            將json字元串處理成treeData展示到tree組件，操作後在轉成json反顯到左側預覽區

            刪除編輯能力通過將treeData這顆多叉樹轉為二叉樹操作後再回退到多叉樹進行回顯

創建react項目

    create-react-app json-edit –template typescript

實現

     index作為入口文件，應當承載著所有內部介面對外暴漏的能力

        這裡將json和editor組件以及useEditor暴漏出去

     json組件用於展示並編輯json字元串

        使用contentEditable開啟編輯，利用pre+JSON.stringify({}, null, ‘ ‘)進行格式化，通過input事件監聽json修改

     tree組件用於展示，並允許彈窗的形式刪除或修改節點

        首先是json字元串轉為多叉樹後展示

    當存在節點編輯後，需要從節點刪除或編輯，可以先將多叉樹轉成二叉樹進行操作，後再轉回多叉樹， 之前實現過，就不重複寫了

    最後就是將編輯後的多叉樹再轉回json字元串

效果如下

待優化的點

     預覽時無法實時進行格式化處理，這是因為格式化操作游標位置會重置，需要不斷進行記錄並在格式化後重新設置

     編輯操作目前僅支持編輯最後一級節點

     刪除操作會導致原json數據的順序被修改，這主要是在生成的id值不正確，導致在二叉轉多叉時排序不準

軟體介紹：

JSON Viewer是一款非常實用的Json格式查看器。在日程開發調試中我們難免會遇到Json格式的數據需要解析閱讀，但Json格式數據閱讀性極差。

所需工具：點擊下載 JSON Viewer編輯器

json view chrome插件

1、將下載好的插件進行安裝，打開chrome – 擴展程序 (地址欄輸入chrome://extensions/)；

2、在chrome瀏覽器右上角工具欄中選中「開發模式」功能選項；

3、點擊”載入正在開發的擴展程序…” – 選擇插件目錄（D:\Download\JSONView-for-Chrome-master\WebContent）；

4、安裝完成，重新載入(Ctrl+R)。

json精靈編輯器載入失敗是文件損失。根據查詢json失敗公開解決方法得知，刪除json精靈編輯器重新下載即可解決。.json是一種輕量級的數據交換格式，在與後端的數據交互中具有較為廣泛的應用。