adf659853d
- 添加javaFontsLoaded和javaThemeChanged事件监听机制 - 在BrowserWindow和BrowserWindowJDialog中实现字体信息获取和注入 - 前端HTML文件增加对应的字体应用逻辑和样式更新 - 创建WindowRegistry统一管理窗口主题更新 - 更新README文档说明HTML事件使用方法- 支持Monaco和CodeMirror编辑器的字体动态调整 -优化CEF浏览器与Java UI的字体和主题同步流程
217 lines
6.6 KiB
HTML
217 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>在线代码编辑器</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg-dark: #2b2b2b;
|
|
--bg-light: #383838;
|
|
--text: #cccccc;
|
|
--blue: #569cd6;
|
|
--green: #6a9955;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-dark);
|
|
color: var(--text);
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#toolbar {
|
|
background: var(--bg-light);
|
|
padding: 10px;
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
background: var(--blue);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 15px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#language-select {
|
|
background: var(--bg-dark);
|
|
color: var(--text);
|
|
padding: 5px;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
#editor-container {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
#output {
|
|
background: #1e1e1e;
|
|
padding: 15px;
|
|
border-top: 2px solid #333;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.status-bar {
|
|
background: var(--bg-light);
|
|
padding: 5px 10px;
|
|
font-size: 0.9em;
|
|
border-top: 1px solid #444;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="toolbar">
|
|
<button class="btn" onclick="runCode()">▶ 运行 (Ctrl+Enter)</button>
|
|
<select id="language-select" onchange="changeLanguage()">
|
|
<option value="python">Python</option>
|
|
<option value="java">Java</option>
|
|
<option value="cpp">C++</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="editor-container"></div>
|
|
|
|
<div class="status-bar">
|
|
<span id="status">就绪</span>
|
|
</div>
|
|
|
|
<div id="output"></div>
|
|
|
|
<script>
|
|
let editor;
|
|
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }});
|
|
require(['vs/editor/editor.main'], function() {
|
|
editor = monaco.editor.create(document.getElementById('editor-container'), {
|
|
value: getDefaultCode('python'),
|
|
language: 'python',
|
|
theme: 'vs-dark',
|
|
minimap: { enabled: true },
|
|
automaticLayout: true,
|
|
fontSize: 14,
|
|
scrollBeyondLastLine: false
|
|
});
|
|
|
|
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, runCode);
|
|
});
|
|
|
|
function getDefaultCode(lang) {
|
|
const templates = {
|
|
python: '# Python 示例\nprint("你好，世界！")\n',
|
|
java: '// Java 示例\npublic class Main {\n public static void main(String[] args) {\n System.out.println("你好，世界！");\n }\n}\n',
|
|
cpp: '// C++ 示例\n#include <iostream>\nusing namespace std;\n\nint main() {\n cout << "你好，世界！" << endl;\n return 0;\n}\n'
|
|
};
|
|
return templates[lang];
|
|
}
|
|
|
|
function changeLanguage() {
|
|
const lang = document.getElementById('language-select').value;
|
|
monaco.editor.setModelLanguage(editor.getModel(), lang);
|
|
editor.setValue(getDefaultCode(lang));
|
|
}
|
|
|
|
// 监听Java字体加载事件
|
|
document.addEventListener('javaFontsLoaded', function(event) {
|
|
const fontInfo = event.detail;
|
|
console.log('接收到Java字体信息:', fontInfo);
|
|
|
|
// 应用Java字体到编辑器
|
|
applyJavaFonts(fontInfo);
|
|
});
|
|
|
|
// 应用Java字体的函数
|
|
function applyJavaFonts(fontInfo) {
|
|
const uiFonts = fontInfo.uiFonts || {};
|
|
const defaultFont = fontInfo.defaultFont || uiFonts['Label.font'] || {};
|
|
|
|
if (defaultFont && defaultFont.family) {
|
|
const fontFamily = defaultFont.family;
|
|
const fontSize = defaultFont.size || 14;
|
|
const fontWeight = defaultFont.bold ? 'bold' : 'normal';
|
|
const fontStyle = defaultFont.italic ? 'italic' : 'normal';
|
|
|
|
// 创建字体样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
body, html {
|
|
font-family: '${fontFamily}', 'Microsoft YaHei', sans-serif !important;
|
|
}
|
|
#output {
|
|
font-family: '${fontFamily}', 'Microsoft YaHei', monospace !important;
|
|
font-size: ${fontSize}px !important;
|
|
}
|
|
.btn, #language-select, #status {
|
|
font-family: '${fontFamily}', 'Microsoft YaHei', sans-serif !important;
|
|
}
|
|
`;
|
|
|
|
// 添加到文档头
|
|
document.head.appendChild(style);
|
|
|
|
// 更新Monaco编辑器字体
|
|
if (window.editor) {
|
|
editor.updateOptions({
|
|
fontFamily: fontFamily,
|
|
fontSize: fontSize
|
|
});
|
|
}
|
|
|
|
console.log('Java字体已应用到编辑器:', fontFamily, fontSize + 'px');
|
|
}
|
|
}
|
|
|
|
// 如果字体信息已经存在，立即应用
|
|
if (typeof window.javaFontInfo !== 'undefined') {
|
|
applyJavaFonts(window.javaFontInfo);
|
|
}
|
|
|
|
function runCode() {
|
|
const code = editor.getValue();
|
|
const language = document.getElementById('language-select').value;
|
|
const output = document.getElementById('output');
|
|
|
|
output.innerHTML = '正在执行...';
|
|
document.getElementById('status').textContent = '正在执行...';
|
|
|
|
const request = {
|
|
type: "executeCode",
|
|
code: code,
|
|
language: language
|
|
};
|
|
|
|
window.cefQuery({
|
|
request: JSON.stringify(request),
|
|
onSuccess: function(response) {
|
|
const result = JSON.parse(response);
|
|
output.innerHTML = result.output;
|
|
document.getElementById('status').textContent = '执行完成';
|
|
},
|
|
onFailure: function(errorCode, errorMsg) {
|
|
const error = JSON.parse(errorMsg);
|
|
output.innerHTML = `错误：${error.message}`;
|
|
document.getElementById('status').textContent = '执行失败';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |