本文目錄一覽：
*.json文件如何打開
json文件可以用文本編輯器打開，這裡以記事本為例。
1、右擊需要打開的json文件，在展開的菜單中點擊“屬性”按鈕打開屬性設置界面：
2、打開屬性界面後，點擊打開方式後面的“更改…”按鈕更改json文件的打開方式：
3、在展開的應用列表中找到記事本，然後將設置保存，這樣雙擊json文件就可以用記事本打開了：
react–實現簡易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在線編輯器修改好後怎麼使用
請使用Widget* UIHelper::seekWidgetByTag(Widget* root, int tag)方法獲取widget節點。cocos2d-x2.x版本是不能這麼直接加到node上的，需要先添加到touchgroup層上才行。
json精靈編輯器載入失敗
json精靈編輯器載入失敗是文件損失。根據查詢json失敗公開解決方法得知，刪除json精靈編輯器重新下載即可解決。.json是一種輕量級的數據交換格式，在與後端的數據交互中具有較為廣泛的應用。
json文件用什麼打開
json數據三種打開方式：用記事本打開、瀏覽器打開、利用文件編輯器打開（如，sublime text、notepad等）
JSON文件如何編輯？
你用 EmEditor，因為這個文本編輯器對大文件處理是部分打開的，對於大文件支持比較好，單純瀏覽是夠了。
據說VIM也可以，不過需要關閉語法高亮等輔助功能！
原創文章，作者：ALWPM，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/329508.html
微信掃一掃 
支付寶掃一掃 