当前位置：首页 > news >正文

AI 写的json快速构建-还原网站

news 2025/11/14 14:53:05

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>JSON 编辑器 (带行列号)</title><link href="http://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.4.1/jsoneditor.min.css" rel="stylesheet" type="text/css"><script src="http://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.4.1/jsoneditor.min.js"></script><style>/* 页面基础样式 */body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;margin: 0;padding: 20px;background-color: #f9f9f9;}h1 {text-align: center;color: #333;}h2 {border-bottom: 2px solid #eee;padding-bottom: 5px;color: #555;}.editor-container {display: flex;gap: 20px;margin-top: 20px;}.panel-wrapper {flex: 1;background: #fff;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.05);padding: 15px;display: flex;flex-direction: column;}/* --- 左侧编辑器 --- */.jsoneditor-container {width: 100%;height: 400px;border-radius: 4px;border: 1px solid #ddd;}/* * --- 右侧文本框 --- *//* 1. 代码编辑器容器 */.code-editor-container {display: flex;height: 400px; /* 固定高度 */border: 1px solid #ddd;border-bottom: none;border-radius: 4px 4px 0 0;overflow: hidden;background-color: #fff;}/* 2. 行号 Gutter 样式 */.line-numbers-gutter {background: #f7f7f7;color: #999;padding: 10px 5px 10px 10px;font-family: monospace;font-size: 14px;line-height: 1.5;text-align: right;overflow: hidden;user-select: none;margin: 0;border-right: 1px solid #eee;}/* 3. 原始 textarea 样式 */textarea#json-input {flex: 1;width: 100%;height: 100%;padding: 10px;font-family: monospace;font-size: 14px;line-height: 1.5;border: none;outline: none;resize: none;box-sizing: border-box;}/* 4. 光标位置状态栏 */.cursor-status-bar {background-color: #f7f7f7;color: #555;padding: 4px 15px;font-size: 12px;font-family: monospace;border: 1px solid #ddd;border-top: 1px solid #eee;border-radius: 0 0 4px 4px;margin-top: -1px;text-align: right;}/* --- 其他样式 --- */.controls {margin-top: 15px;text-align: center;}.controls button {background-color: #007aff;color: white;border: none;padding: 10px 15px;border-radius: 5px;cursor: pointer;font-size: 14px;font-weight: 500;transition: background-color 0.2s;min-width: 150px;}.controls button:hover {background-color: #005bb5;}pre#status-output {background-color: #f8f8f8;border: 1px solid #eee;padding: 10px;border-radius: 4px;font-size: 13px;white-space: pre-wrap;word-wrap: break-word;min-height: 40px;margin-top: 15px;color: #333;}</style>
</head>
<body><h1>JSON 编辑器 (带行列号)</h1><div class="editor-container"><div class="panel-wrapper"><h2>JSON 结构化编辑器 (构建)</h2><div id="jsoneditor" class="jsoneditor-container"></div><div class="controls"><button onclick="getJsonFromEditor()"><b>获取JSON &raquo;</b><br><small>(更新到右侧文本框)</small></button></div></div><div class="panel-wrapper"><h2>JSON 原始文本 (加载/查看)</h2><div class="code-editor-container"><pre id="line-numbers" class="line-numbers-gutter"></pre>
<textarea id="json-input">
{"String": "这是一个字符串","Number": 123.45,"Boolean": true,"Null_Value": null,"Array": [1,"item2",false],"Nested_Object": {"key1": "值1","key2": "值2","deeper_array": [{"id": 1,"task": "完成"},{"id": 2,"task": "待办"}]}
}
</textarea></div><div id="cursor-position-display" class="cursor-status-bar">行: 1, 列: 1</div><div class="controls"><button onclick="loadJsonToEditor()"><b>&laquo; 加载到编辑器</b><br><small>(还原到左侧视图)</small></button></div></div></div><div class="panel-wrapper" style="margin-top: 20px; background-color: #fffaf0;"><h2>状态信息</h2><pre id="status-output">页面已加载。在右侧粘贴JSON并点击 "加载到编辑器" 即可开始。</pre></div><script>let editor;let statusOutput;let textInput;let lineNumbers;let cursorDisplay;// 页面加载完成后执行初始化document.addEventListener('DOMContentLoaded', () => {statusOutput = document.getElementById('status-output');textInput = document.getElementById('json-input');lineNumbers = document.getElementById('line-numbers');cursorDisplay = document.getElementById('cursor-position-display');// --- 绑定事件监听 ---textInput.addEventListener('input', () => {updateLineNumbers();updateCursorPosition();});textInput.addEventListener('scroll', syncScroll);textInput.addEventListener('keyup', updateCursorPosition);textInput.addEventListener('click', updateCursorPosition);textInput.addEventListener('mouseup', updateCursorPosition);try {// 检查 JSONEditor 库if (typeof JSONEditor === 'undefined') {notify("错误：JSONEditor 库未能加载。请检查F12控制台。", true);return;}// --- 初始化左侧的 JSON 编辑器 ---const container = document.getElementById('jsoneditor');const options = {mode: 'tree',modes: ['tree', 'code', 'text', 'view', 'form', 'preview'],search: true,indentation: 2,onChange: () => {notify("编辑器内容已修改。点击 '获取JSON' 按钮可更新右侧文本。", false);}};editor = new JSONEditor(container, options, {});// --- 页面加载后，自动加载默认JSON ---loadJsonToEditor();// --- 初始化行号和光标位置 ---updateLineNumbers();updateCursorPosition();} catch (error) {notify("编辑器初始化时发生严重错误: " + error.message, true);console.error("编辑器初始化时发生严重错误:", error);}});/*** 功能：将右侧文本框的JSON字符串加载到左侧编辑器中*/function loadJsonToEditor() {if (!editor) {notify("错误：编辑器未初始化。", true);return;}const rawText = textInput.value;if (rawText.trim() === "") {editor.set({});notify("文本框为空，已重置编辑器。", false);updateLineNumbers();updateCursorPosition();return;}try {const jsonData = JSON.parse(rawText);editor.set(jsonData);notify("JSON 加载成功！已从右侧文本还原到左侧编辑器。", false);updateLineNumbers();updateCursorPosition();} catch (error) {notify("JSON 格式错误！\n" + error.message, true);console.error("JSON parse error:", error);}}/*** 功能：将左侧编辑器的内容获取为JSON字符串，并设置到右侧文本框中*/function getJsonFromEditor() {if (!editor) {notify("错误：编辑器未初始化。", true);return;}try {const jsonData = editor.get();const jsonString = JSON.stringify(jsonData, null, 2);textInput.value = jsonString;notify("获取JSON成功！已从左侧编辑器更新到右侧文本框。", false);updateLineNumbers();updateCursorPosition();} catch (error) { // *** 已修复这里的语法错误 ***notify("获取JSON时出错：\n" + error.message, true);console.error("Editor get error:", error);}}/*** 辅助函数：更新状态栏信息*/function notify(message, isError) {if (statusOutput) {statusOutput.textContent = message;statusOutput.style.color = isError ? 'red' : 'green';statusOutput.style.borderColor = isError ? '#ffcccb' : '#c3e6cb';statusOutput.style.backgroundColor = isError ? '#fff0f0' : '#f0fff0';}}// --- 行号相关函数 ---function syncScroll() {if (lineNumbers && textInput) {lineNumbers.scrollTop = textInput.scrollTop;}}function updateLineNumbers() {if (!textInput || !lineNumbers) return;requestAnimationFrame(() => {const text = textInput.value;const lineCount = text.split('\n').length;let numbersHtml = '';for (let i = 1; i <= lineCount; i++) {numbersHtml += i + '\n';}lineNumbers.textContent = numbersHtml;syncScroll();});}// --- 光标位置函数 ---function updateCursorPosition() {if (!textInput || !cursorDisplay) return;requestAnimationFrame(() => {const cursorIndex = textInput.selectionStart;const textBeforeCursor = textInput.value.substring(0, cursorIndex);const lineNumber = (textBeforeCursor.match(/\n/g) || []).length + 1;const lastNewlineIndex = textBeforeCursor.lastIndexOf('\n');const columnNumber = (lastNewlineIndex === -1)? (cursorIndex + 1): (cursorIndex - lastNewlineIndex);cursorDisplay.textContent = `行: ${lineNumber}, 列: ${columnNumber}`;});}</script></body>
</html>