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

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

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

本網試玩

官方網站

內置到wordpress網站步驟

首先下載以下四個文件(右鍵或長按下載,不要點擊打開):

之後在主題的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="模式:同上"。

Leave a Comment