在 Web 中使用 ACE Editor for Java Language答案

【问题标题】：Use ACE Editor for Java Language in web在 Web 中使用 ACE Editor for Java Language
【发布时间】：2020-10-19 05:51:28
【问题描述】：

我想做一个像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>

// Retrieve Elements
const consoleLogList = document.querySelector('.editor__console-logs');
const executeCodeBtn = document.querySelector('.editor__run');
const resetCodeBtn = document.querySelector('.editor__reset');

为 Web 构建代码编辑器 - 配置 Ace 编辑器为 Web 构建代码编辑器 - 配置 Ace 编辑器 JS 文件

// 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();

【问题讨论】：

是的，文本编辑器不编译代码；编译器会这样做。您链接到的 ACE 网站有一个功能列表；你看到有什么关于在那里编译的吗？
@kaya3，如何添加编译功能？

标签： java ace-editor

【解决方案1】：

如何添加编译功能？

假设...您让您的编辑器将源代码发送到安装了 Java 编译器的服务器并运行它。

如果您的应用程序的服务器端是用 Java 实现的，您可以使用 Java 的运行时编译 API。见How do I programmatically compile and instantiate a Java class?。（跳过关于加载和运行编译代码的部分......除非你也想这样做。）

【讨论】：

【解决方案2】：

Ace 是编辑器，而不是编译器。你不能用它来编译代码。

Ideone 使用 Sphere Engine Compilers 编译...

请参阅此文档：link

【讨论】：