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;
});

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

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

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

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

Leave a Comment