今日提醒
2025年7月25日星期五

报名提醒

  • 「排位赛」 参赛报名已结束

周常活动


注:若不希望弹窗提醒可在设置页面关闭全站弹窗
今日不再提醒
bugfix250107.1
全站通知:

MediaWiki:BwikiJSONEditor.js

来自咸鱼之王WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl + F5Ctrl + R(Mac为⌘ + R
  • Google Chrome:Ctrl + Shift + R(Mac为⌘ + Shift + R
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl + F5
  • Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件
/**
 * Powered by JsonEditor 
 * Created by 剑走诗湖
 * CopyRight 2023-2024
 *
 */



function addStyle() {
	let style = document.createElement('style');
	style.appendChild(document.createTextNode(
		`
		#JsonEditor_L{
			max-height:500px;
			height: 500px;
		}
		#JsonEditor_R{
			max-height:500px;
			height: 500px;
		}
		#jsoneditor_hint {
		  transition: opacity 3s ease;
		  opacity: 1;
		}
			`
	));

	document.head.appendChild(style);
}
addStyle();

// 提前加载依赖
function loadOL() {
	// if ((document.location.search).indexOf("&") == -1 && mw.config.values.wgTitle.endsWith(".json") && document
	// 	.getElementsByClassName("mw-parser-output").length != 0) 
	{
		let script = document.createElement('script');
		script.src = 'https://cdn.bootcdn.net/ajax/libs/jsoneditor/10.1.2/jsoneditor.min.js';
		script.onload = afterLoad;
		document.head.appendChild(script);
		let css = document.createElement('link');
		css.rel = 'stylesheet';
		css.type = 'text/css';
		css.href = 'https://cdn.bootcdn.net/ajax/libs/jsoneditor/10.1.2/jsoneditor.min.css';
		document.head.appendChild(css);
	}
}
// loadOL();
RLQ.push(['mediawiki.api', loadOL])
// document.loadOL = loadOL;

function writeInDoc(textInfo) {
	// document.write(textInfo)
	var a = document.getElementsByClassName("mw-parser-output")[0]
	// console.log(a)
	if (a != null) {
		a.innerHTML = null;
		if (typeof textInfo == 'object') {
			a.appendChild(textInfo)
		} else a.innerHTML = textInfo
	} else {
		if (typeof textInfo == 'object') {
			document.append(textInfo)
		} else document.write(textInfo)
	}
}

var editor_r;
var editor_l;

function afterLoad() {
	// create the editor
	let row = document.createElement('div');
	row.classList.add('row')
	row.innerHTML =
		"<div id='jsoneditor_hint'>按住ctrl键可以点击相对路径跳转哦</div><div class='col-sm-12'><button id='bt_submit_json' type='button'  ><div id='bt_submit_json_text' style='pointer-events:none;'>点击提交</div></button></div>"
	row.querySelector('#bt_submit_json').onclick = submitJson;

	let colsm6_1 = document.createElement('div');
	colsm6_1.classList.add('col-sm-6');
	let colsm6_2 = document.createElement('div');
	colsm6_2.classList.add('col-sm-6');

	let container_l = document.createElement('div');
	container_l.id = 'JsonEditor_L'

	let container_r = document.createElement('div');
	container_r.id = 'JsonEditor_R'


	colsm6_1.appendChild(container_l);
	colsm6_2.appendChild(container_r);
	row.appendChild(colsm6_1);
	row.appendChild(colsm6_2);
	writeInDoc(row);
	setTimeout(function() {
		let element = document.getElementById("jsoneditor_hint");

		element.style.opacity = 0;
	}, 500);

	// writeInDoc(container);
	const options = {
		mode: 'tree',
		modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
		onModeChange: function(newMode, oldMode) {
			console.log('Mode switched from', oldMode, 'to', newMode)
		},
		onChangeText: function(jsonString) {
			editor_l.updateText(jsonString)
		},
		onEvent: function(node, event) {
			if (event.type == "click" && event.ctrlKey) {
				if (node.value !== undefined && node.path[node.path.length - 1] == "相对路径") {

					path = mw.config.values['wgServer'] + mw.config.values['wgScriptPath'] + "/";
					path += node.value;
					// console.log(path);
					window.open(path);
				}
			}
		}
	}
	editor_r = new JSONEditor(container_r, options)
	document.er = editor_r;
	const options2 = {
		mode: 'code',
		onChangeText: function(jsonString) {
			editor_r.updateText(jsonString)
		},
		onEditable: function(node) {
			console.log(node)
			switch (node.field) {
				case '名称':
					return {
						field: false,
							value: true
					}

				default:
					return true
			}
		}

	};
	editor_l = new JSONEditor(container_l, options2);

	loadJson();
	// get json
	// const updatedJson = editor.get()
	// console.log(updatedJson)
}

function submitJson(e) {
	e.target.disabled = true;
	let api = new mw.Api();
	api.get({
			action: 'query',
			meta: 'tokens'
		}).then(function(response) {
			let token = response.query.tokens.csrftoken;
			api.post({
				action: 'edit',
				title: mw.config.values.wgTitle,
				text: JSON.stringify(editor_r.get(), null, 0),
				token: token
			}).then(function(response) {
				let edit = response.edit;
				if (edit.result === 'Success') {
					console.log('提交成功\n', edit);
					alert('提交成功');
				} else {
					console.log('提交失败\n', edit);
					alert('提交失败')
				}
				// throw new Error('这是一个错误');
				e.target.disabled = false;
			}).catch(err => {
				console.error(err);
				e.target.disabled = false;
			});
		})
		.catch(err => {
			console.error(err);
			e.target.disabled = false;
		})
}


function loadJson() {
	new mw.Api().get({
		action: 'query',
		// title: mw.config.values.wgTitle,
		format: 'json',
		prop: 'revisions',
		rvprop: 'content|ids',
		titles: mw.config.values.wgTitle
	}).then((a) => {
		console.log(a);
		let pages = a.query.pages;
		// console.log(pages);
		for (let pageId in pages) {
			let page = pages[pageId];
			let title = page.title;
			let revision = page.revisions[0];
			let content = revision['*'];
			// console.log('Title: ' + title);
			let contentJSON = JSON.parse(content);
			console.log('Content: ', contentJSON);
			editor_r.set(contentJSON);
			editor_l.set(contentJSON);
		}
	})
}