2025-11-02 19:17:20 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>文件编辑器</title>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
html, body {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
|
|
|
|
}
|
|
|
|
|
|
#header {
|
|
|
|
|
|
background-color: #333;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
#saveBtn {
|
|
|
|
|
|
background-color: #4CAF50;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
margin: 4px 2px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#container {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: calc(100% - 50px);
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="header">
|
|
|
|
|
|
<h3>文件编辑器</h3>
|
|
|
|
|
|
<button id="saveBtn" onclick="saveAndReturn()">保存并返回</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="container"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 引入Monaco Editor的loader.js -->
|
|
|
|
|
|
<script src="../editor/min/vs/loader.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 简单的Base64编解码函数
|
|
|
|
|
|
const Base = {
|
|
|
|
|
|
encode: function(str) {
|
|
|
|
|
|
return btoa(unescape(encodeURIComponent(str)));
|
|
|
|
|
|
},
|
|
|
|
|
|
decode: function(str) {
|
|
|
|
|
|
return decodeURIComponent(escape(atob(str)));
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 配置Monaco Editor路径
|
|
|
|
|
|
require.config({paths: {'vs': '../editor/min/vs'}});
|
|
|
|
|
|
|
|
|
|
|
|
let editor;
|
|
|
|
|
|
let tempFilePath = '';
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化Monaco Editor
|
2025-11-02 22:06:42 +08:00
|
|
|
|
require(['vs/editor/editor.main'], function() {
|
2025-11-02 19:17:20 +08:00
|
|
|
|
// 从URL参数获取内容和语言
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
|
const contentParam = urlParams.get('content');
|
|
|
|
|
|
const languageParam = urlParams.get('language') || 'text';
|
|
|
|
|
|
tempFilePath = urlParams.get('temp_file') || '';
|
|
|
|
|
|
|
|
|
|
|
|
// 解码内容
|
|
|
|
|
|
let initialContent = '';
|
|
|
|
|
|
if (contentParam) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
initialContent = Base.decode(contentParam);
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
console.error('解码内容失败:', e);
|
2025-11-02 22:06:42 +08:00
|
|
|
|
initialContent = contentParam; // 如果解码失败，使用原始内容
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 创建编辑器实例
|
|
|
|
|
|
editor = monaco.editor.create(document.getElementById('container'), {
|
|
|
|
|
|
value: initialContent,
|
|
|
|
|
|
language: languageParam,
|
|
|
|
|
|
automaticLayout: true,
|
|
|
|
|
|
minimap: { enabled: true },
|
|
|
|
|
|
fontSize: 14,
|
2025-11-02 22:06:42 +08:00
|
|
|
|
fontFamily: 'Consolas, "Courier New", monospace',
|
|
|
|
|
|
scrollBeyondLastLine: false,
|
2025-11-02 19:17:20 +08:00
|
|
|
|
lineNumbers: 'on',
|
2025-11-02 22:06:42 +08:00
|
|
|
|
roundedSelection: true,
|
|
|
|
|
|
scrollbar: {
|
|
|
|
|
|
useShadows: false,
|
|
|
|
|
|
verticalScrollbarSize: 10,
|
|
|
|
|
|
horizontalScrollbarSize: 10
|
|
|
|
|
|
}
|
2025-11-02 19:17:20 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
// 监听窗口大小变化
|
|
|
|
|
|
window.addEventListener('resize', function() {
|
|
|
|
|
|
if (editor) {
|
|
|
|
|
|
editor.layout();
|
|
|
|
|
|
}
|
2025-11-02 19:17:20 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
// 延迟执行，确保编辑器已初始化
|
|
|
|
|
|
setTimeout(function() {
|
2025-11-02 19:17:20 +08:00
|
|
|
|
if (editor) {
|
2025-11-02 22:06:42 +08:00
|
|
|
|
editor.focus();
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
2025-11-02 22:06:42 +08:00
|
|
|
|
}, 100);
|
2025-11-02 19:17:20 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 暴露获取内容的方法给QWebEngineView调用
|
|
|
|
|
|
function getEditorContent() {
|
|
|
|
|
|
return editor ? editor.getValue() : '';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 暴露设置内容的方法
|
|
|
|
|
|
function setEditorContent(content) {
|
|
|
|
|
|
if (editor) {
|
|
|
|
|
|
editor.setValue(content);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 暴露设置语言的方法
|
|
|
|
|
|
function setEditorLanguage(language) {
|
|
|
|
|
|
if (editor && monaco) {
|
|
|
|
|
|
const model = editor.getModel();
|
|
|
|
|
|
if (model) {
|
|
|
|
|
|
monaco.editor.setModelLanguage(model, language);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 保存并返回应用程序
|
|
|
|
|
|
function saveAndReturn() {
|
|
|
|
|
|
// 获取编辑器内容
|
|
|
|
|
|
const content = getEditorContent();
|
|
|
|
|
|
|
|
|
|
|
|
// 对内容进行Base64编码
|
|
|
|
|
|
const encodedContent = Base.encode(content);
|
|
|
|
|
|
|
|
|
|
|
|
// 创建保存数据对象
|
|
|
|
|
|
const saveData = {
|
|
|
|
|
|
content: encodedContent,
|
|
|
|
|
|
saved: true,
|
|
|
|
|
|
timestamp: new Date().getTime(),
|
|
|
|
|
|
language: editor && editor.getModel() ? editor.getModel().getLanguageId() : 'text'
|
|
|
|
|
|
};
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
// 直接向本地服务器发送POST请求（主要方式）
|
2025-11-02 19:17:20 +08:00
|
|
|
|
try {
|
|
|
|
|
|
// 获取当前端口号
|
|
|
|
|
|
const currentPort = window.location.port;
|
|
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
|
|
|
|
|
|
|
|
// 向本地服务器发送保存请求
|
|
|
|
|
|
xhr.open('POST', `http://127.0.0.1:${currentPort}/save`, true);
|
|
|
|
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
|
|
|
|
|
|
|
|
|
|
xhr.onload = function() {
|
|
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
|
|
console.log('服务器接收保存成功');
|
2025-11-02 22:06:42 +08:00
|
|
|
|
alert('内容已成功保存并返回应用程序');
|
|
|
|
|
|
|
|
|
|
|
|
// 尝试使用自定义协议返回应用程序
|
|
|
|
|
|
try {
|
|
|
|
|
|
window.location.href = 'leonpan:save-success';
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
console.error('无法通过协议返回应用程序:', e);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 尝试关闭窗口（某些浏览器可能阻止此操作）
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
|
window.close();
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('服务器返回错误状态:', xhr.status);
|
|
|
|
|
|
alert('保存失败，请重试');
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
xhr.onerror = function() {
|
|
|
|
|
|
console.error('向服务器发送保存请求失败');
|
2025-11-02 22:06:42 +08:00
|
|
|
|
alert('保存请求发送失败，请检查网络连接');
|
2025-11-02 19:17:20 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
xhr.send(JSON.stringify(saveData));
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
console.error('发送保存请求时出错:', e);
|
2025-11-02 22:06:42 +08:00
|
|
|
|
alert('保存过程中发生错误: ' + e.message);
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
// 备用: 保存到localStorage，以便应用程序在POST失败时可以尝试读取
|
|
|
|
|
|
localStorage.setItem('leonpan_editor_content', JSON.stringify(saveData));
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 获取系统临时目录路径（用于显示给用户）
|
|
|
|
|
|
function getSystemTempDir() {
|
|
|
|
|
|
// 根据不同操作系统返回临时目录路径格式
|
|
|
|
|
|
if (navigator.platform.indexOf('Win') !== -1) {
|
|
|
|
|
|
return '%TEMP%';
|
|
|
|
|
|
} else if (navigator.platform.indexOf('Mac') !== -1) {
|
|
|
|
|
|
return '/tmp';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return '/tmp';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
// 初始化函数（根据URL参数）
|
2025-11-02 19:17:20 +08:00
|
|
|
|
function initFromUrl() {
|
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
2025-11-02 22:06:42 +08:00
|
|
|
|
const contentParam = urlParams.get('content');
|
|
|
|
|
|
const languageParam = urlParams.get('language');
|
2025-11-02 19:17:20 +08:00
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
if (contentParam) {
|
2025-11-02 19:17:20 +08:00
|
|
|
|
try {
|
2025-11-02 22:06:42 +08:00
|
|
|
|
const decodedContent = Base.decode(contentParam);
|
2025-11-02 19:17:20 +08:00
|
|
|
|
setEditorContent(decodedContent);
|
|
|
|
|
|
} catch (e) {
|
2025-11-02 22:06:42 +08:00
|
|
|
|
console.error('从URL初始化内容失败:', e);
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
if (languageParam) {
|
|
|
|
|
|
setEditorLanguage(languageParam);
|
2025-11-02 19:17:20 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-11-02 22:06:42 +08:00
|
|
|
|
// 页面加载完成后执行初始化
|
2025-11-02 19:17:20 +08:00
|
|
|
|
window.addEventListener('load', function() {
|
|
|
|
|
|
// 延迟执行，确保编辑器已初始化
|
|
|
|
|
|
setTimeout(initFromUrl, 1000);
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
