當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JSON 在线编辑器
生活随笔
收集整理的這篇文章主要介紹了
JSON 在线编辑器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jsoneditor 是 JSON 在線編輯器插件，用法如下
一、插件下載
jsoneditor 官網地址：https://github.com/josdejong/jsoneditor，插件在 dist 目錄下（img、jsoneditor.css 和 jsoneditor.js）
二、使用
在 HTML 頁面中引入 jsoneditor 插件即可：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>JSON編輯器</title><link rel="stylesheet" type="text/css" href="plugins/jsoneditor/jsoneditor.css" /><script src="plugins/jsoneditor/jsoneditor.js"></script></head><body><!--容器--><div id="jsoneditor" style="width: 400px; height: 400px;"></div><script>// 創建對象var container = document.getElementById("jsoneditor");var options = {// modes: ['tree','code'], 可以設置多種模式隨意切換mode: 'code', // tree，view，form，code，text onError: function(err) {alert(err.toString());}};// 實例化對象var editor = new JSONEditor(container, options);// JSON數據var json = {"Array": [1, 2, 3],"Boolean": true,"Null": null,"Number": 123,"Object": {"a": "b","c": "d"},"String": "Hello World"};// JSONEditor.set(data) 設置數據editor.set(json);// JSONEditor.get() 和 JSONEditor.getText() 獲取數據var json = editor.get();console.log(JSON.stringify(json));var text = editor.getText();console.log(text);// JSONEditor.setMode(mode) 設置模式editor.setMode('tree');</script></body></html>樣式和內容可以修改 jsoneditor.css 文件
總結
以上是生活随笔為你收集整理的JSON 在线编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络管理员demo,计算机网络试题
- 下一篇： 简单快速的用SpringBoot访问静态