英文:
Use ACE Editor for Java Language in web
问题
我希望制作一个类似 ideone.com 的在线 Java 编辑器。
我希望使用 https://ace.c9.io/#nav=about&api=anchor 来创建我的工具。
我已经使用了 codeEditor.session.setMode("ace/mode/java"); 但是我的工具仍然无法编译 Java 语言。
到目前为止，我的代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/css/editor-styles.css">
<title>Online Test</title>
</head>
<body>
<div class="editor">
<div class="editor__wrapper">
<div class="editor__body">
<div id="editorCode" class="editor__code"></div>
</div>
<div class="editor__footer">
<div class="editor__footer--left">
<button class="editor__btn editor__run">Run ></button>
<button class="editor__btn editor__reset">Reset ></button>
</div>
<div class="editor__footer--right">
<div class="editor__console">
<ul class="editor__console-logs"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Required Ace Libraries -->
<script src="lib/js/ace-editor/src-min/ace.js"></script>
<script src="lib/js/ace-editor/src-min/mode-javascript.js"></script>
<script src="lib/js/ace-editor/src-min/ext-language_tools.js"></script>
<!-- Custom Scripts -->
<script src="lib/js/editor.js"></script>
<script src="lib/js/editor-console.js"></script>
</body>
</html>
// 检索元素
const consoleLogList = document.querySelector('.editor__console-logs');
const executeCodeBtn = document.querySelector('.editor__run');
const resetCodeBtn = document.querySelector('.editor__reset');
构建用于Web的代码编辑器 - 配置Ace编辑器
构建用于Web的代码编辑器 - 配置Ace编辑器
JS文件
// 设置Ace
let codeEditor = ace.edit("editorCode");
let defaultCode = 'console.log("Editor")';
let consoleMessages = [];
let editorLib = {
clearConsoleScreen() {
consoleMessages.length = 0;
// 移除日志列表中的所有元素
while (consoleLogList.firstChild) {
consoleLogList.removeChild(consoleLogList.firstChild);
}
},
printToConsole() {
consoleMessages.forEach(log => {
const newLogItem = document.createElement('li');
const newLogText = document.createElement('pre');
newLogText.className = log.class;
newLogText.textContent = `> ${log.message}`;
newLogItem.appendChild(newLogText);
consoleLogList.appendChild(newLogItem);
})
},
init() {
// 配置Ace
// 主题
codeEditor.setTheme("ace/theme/monokai");
// 设置语言
codeEditor.session.setMode("ace/mode/java");
// 设置选项
codeEditor.setOptions({
fontFamily: 'Inconsolata',
fontSize: '12pt',
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
});
// 设置默认代码
codeEditor.setValue(defaultCode);
}
}
// 事件
executeCodeBtn.addEventListener('click', () => {
// 清除控制台消息
editorLib.clearConsoleScreen();
// 从代码编辑器获取输入
const userCode = codeEditor.getValue();
// 运行用户代码
try {
new Function(userCode)();
} catch (err) {
console.error(err);
}
// 打印到控制台
editorLib.printToConsole();
});
resetCodeBtn.addEventListener('click', () => {
// 清除Ace编辑器
codeEditor.setValue(defaultCode);
// 清除控制台消息
editorLib.clearConsoleScreen();
})
editorLib.init();
<details>
<summary>英文:</summary>
I wish to make an online java editor like ideone.com
I wish to use https://ace.c9.io/#nav=about&api=anchor to make my tool.
I have used codeEditor.session.setMode("ace/mode/java"); but stil my tool does not compile java language.
Till now my code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/css/editor-styles.css">
<title>Online Test</title>
</head>
<body>
<div class="editor">
<div class="editor__wrapper">
<div class="editor__body">
<div id="editorCode" class="editor__code"></div>
</div>
<div class="editor__footer">
<div class="editor__footer--left">
<button class="editor__btn editor__run">Run ></button>
<button class="editor__btn editor__reset">Reset ></button>
</div>
<div class="editor__footer--right">
<div class="editor__console">
<ul class="editor__console-logs"></ul>
</div>
</div>
</div>
</div>
</div>
<!-- Required Ace Libraries -->
<script src="lib/js/ace-editor/src-min/ace.js"></script>
<script src="lib/js/ace-editor/src-min/mode-javascript.js"></script>
<script src="lib/js/ace-editor/src-min/ext-language_tools.js"></script>
<!-- Custom Scripts -->
<script src="lib/js/editor.js"></script>
<script src="lib/js/editor-console.js"></script>
</body>
</html>
// Retrieve Elements
const consoleLogList = document.querySelector('.editor__console-logs');
const executeCodeBtn = document.querySelector('.editor__run');
const resetCodeBtn = document.querySelector('.editor__reset');
Building a Code Editor for the Web - Configuring Ace Editor
Building a Code Editor for the Web - Configuring Ace Editor
**JS FILE**
// Setup Ace
let codeEditor = ace.edit("editorCode");
let defaultCode = 'console.log("Editor")';
let consoleMessages = [];
let editorLib = {
clearConsoleScreen() {
consoleMessages.length = 0;
// Remove all elements in the log list
while (consoleLogList.firstChild) {
consoleLogList.removeChild(consoleLogList.firstChild);
}
},
printToConsole() {
consoleMessages.forEach(log => {
const newLogItem = document.createElement('li');
const newLogText = document.createElement('pre');
newLogText.className = log.class;
newLogText.textContent = `> ${log.message}`;
newLogItem.appendChild(newLogText);
consoleLogList.appendChild(newLogItem);
})
},
init() {
// Configure Ace
// Theme
codeEditor.setTheme("ace/theme/monokai");
// Set language
codeEditor.session.setMode("ace/mode/java");
// Set Options
codeEditor.setOptions({
fontFamily: 'Inconsolata',
fontSize: '12pt',
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
});
// Set Default Code
codeEditor.setValue(defaultCode);
}
}
// Events
executeCodeBtn.addEventListener('click', () => {
// Clear console messages
editorLib.clearConsoleScreen();
// Get input from the code editor
const userCode = codeEditor.getValue();
// Run the user code
try {
new Function(userCode)();
} catch (err) {
console.error(err);
}
// Print to the console
editorLib.printToConsole();
});
resetCodeBtn.addEventListener('click', () => {
// Clear ace editor
codeEditor.setValue(defaultCode);
// Clear console messages
editorLib.clearConsoleScreen();
})
editorLib.init();
</details>
# 答案1
**得分**: 1
> 如何为它添加编译功能？
假设...您可以让您的编辑器将源代码发送到安装有Java编译器的服务器上并运行它。
如果您的应用程序的服务器端是用Java实现的，您*可能*可以利用Java的运行时编译API。请参考https://stackoverflow.com/questions/2946338/how-do-i-programmatically-compile-and-instantiate-a-java-class。 （除非您也想这样做，否则跳过有关加载和运行已编译代码的部分。）
<details>
<summary>英文:</summary>
> How to add compile feature to it?
Hypothetically ... you get your editor to send the source code to a server that has a Java compiler installed and you run it.
If your app's server side is implemented in Java, you *could* make use of Java's runtime compilation APIs. See https://stackoverflow.com/questions/2946338/how-do-i-programmatically-compile-and-instantiate-a-java-class. (Skip over the part about loading and running the compiled code ... unless you want to do that too.)
</details>
# 答案2
**得分**: 0
**Ace是一个编辑器，不是编译器。
你不能用它来编译代码。**
Ideone使用Sphere Engine编译器来编译...
请参阅此文档：[链接][1]
[1]: https://docs.sphere-engine.com/compilers/overview
<details>
<summary>英文:</summary>
**Ace is an editor, not a compiler.
You can't use it to compile code.**
Ideone use Sphere Engine Compilers to compile...
Refer this documentation : [1]
[1]: https://docs.sphere-engine.com/compilers/overview
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论