Json Editor：在純文本的路上狂奔

折騰了一個晚上和一個早上，把json-editor弄到了網站中。

這回我沒有做成插件，而是直接把json/資料夾上傳到wordpress根目錄把程式文件上傳至媒體庫。因為我已經看透wordpress插件了，它跟上傳至媒體庫沒有任何區別！還省了開啟/關閉這一步驟。

本網試玩

• 地址：https://ejsoon.win/json/（空白）
• 或者： 打開它

官方網站

• https://jsoneditoronline.org/classic（經典版）
• https://jsoneditoronline.org/（升級版）

內置到wordpress網站步驟

首先下載以下四個文件（右鍵或長按下載，不要點擊打開）：

• https://ejsoon.win/wp-content/uploads/2022/11/json.html
• https://ejsoon.win/wp-content/uploads/2022/11/jsoneditor.min_.css
• https://ejsoon.win/wp-content/uploads/2022/11/jsoneditor-icons.svg
• https://ejsoon.win/wp-content/uploads/2022/11/jsoneditor.min_.js

之後在主題的function.php加入以下代碼：

<?php

add_filter( 'run_wptexturize', '__return_false' );
// [json/]
add_shortcode( 'json', function ( $atts, $content = "{}" ) {
	$json_mode = isset($atts["mode"]) ? $atts["mode"] : "tree";
	$btn_txt = isset($atts["txt"]) ? $atts["txt"] : "open json-editor";
	return <<<clkkk
	<button onclick="window['jsondata'] = JSON.stringify(JSON.parse(this.nextElementSibling.value)); window['jsonmode'] = '$json_mode'; window.open('/wp-content/uploads/2022/11/json.html');">$btn_txt</button>
	<input type="hidden" value='$content'>
clkkk;
});
// [jfrm/]
add_shortcode( 'jfrm', function ( $atts, $content = "{}" ) {
	$jfrm_height = isset($atts["jh"]) ? $atts["jh"]."px" : "480px";
	$jfrm_mode = isset($atts["mode"]) ? $atts["mode"] : "view";
	return <<<clkkk
	<iframe style="width:100%;height:$jfrm_height;" src='/wp-content/uploads/2022/11/json.html' frameborder="0" onload="this.contentWindow.ifrm_update(this.nextElementSibling.value, '$jfrm_mode')"></iframe>
	<input type="hidden" value='$content'>
clkkk;
});

使用的時候，就可以用〔json〕json數據〔/json〕來調用（把〔〕換成英文符號[]）

如果是內嵌至網頁，就用〔jfrm〕json數據〔/jfrm〕。

〔json/〕可加的參數有txt="標題"，mode="模式：view，text，tree三選一，默認是tree"。

〔jfrm/〕可加的參數有jh="高度，單位是px，填數字即可"，mode="模式：同上"。