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;
});
// [ju/]
add_shortcode( 'ju', function ( $atts) {
	$ju_height = isset($atts["jh"]) ? $atts["jh"]."px" : "480px";
	$juid = get_the_id();
	$judata = get_post_meta($juid, 'jsondata', true);
	$ju_html = <<<clkkk
	<button onclick="updateJson()">Update</button><span style="display: inline-block; margin: 7px;">$juid</span>
	<iframe id="ju" style="width:100%;height:$ju_height;" src='/wp-content/uploads/2023/09/json.html?v=1250' frameborder="0" onload="this.contentWindow.ifrmUpdate(this.nextElementSibling.value)"></iframe>
	<input type="hidden" value='$judata'>
	<div class="jud hide"></div>
	<style>
	.jud {
  position: fixed;
  display: inline-block;
  left: 0;
  top: 0;
  background: lightgreen;
  padding: 12px;
  z-index: 77777777;
  }
  .hide {display: none;}
	</style>
clkkk;
	// auto update
	$admin_url = admin_url('admin-ajax.php');
	// $admin_url = "/wp-admin/admin-ajax.php";
	$ju_html .= <<<aupd
	<script>
	function updateJson () {
		let ju = document.getElementById("ju");
		let jutxt = ju.contentWindow.ifrmGet();
		jQuery(document).ready(function($){
			var data = {
				action: 'json_post', 
				jsondata: jutxt,
				id: $juid
			}
			$.post("$admin_url", data, function(response) {
				$(".jud").text(response);
				$(".jud").removeClass("hide");
				setTimeout(function () {
					$(".jud").addClass("hide");
				}, 1200);
			});
		});

	}
	</script>
aupd;
	return $ju_html;
});
function jpst() {
	// print_r($_POST);
	if (isset($_POST["id"]) && isset($_POST["jsondata"])) {
		update_post_meta(intval($_POST["id"]), "jsondata", $_POST["jsondata"]);
		echo "ok";
	} else {
		echo "invalid";
	}
	die();
}
add_action('wp_ajax_json_post', 'jpst');
// add_action('wp_ajax_nopriv_json_post', 'jpst');

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

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

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

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