在 Web 中使用 Java 语言的 ACE 编辑器

Question

我想制作一个像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();

Answer 1

如何为其添加编译功能？

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

如果您的应用程序的服务器端是用 Java 实现的，您可以使用 Java 的运行时编译 API。 请参阅如何以编程方式编译和实例化 Java 类？ . （跳过关于加载和运行编译代码的部分......除非你也想这样做。）

Answer 2

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

Ideone 使用 Sphere 引擎编译器来编译...

请参阅此文档：链接

在 Web 中使用 Java 语言的 ACE 编辑器

问题描述

2 个解决方案

解决方案1
1 2020-10-19 07:28:02

解决方案2
0 2020-10-19 06:08:58

在 Web 中使用 Java 语言的 ACE 编辑器

问题描述

2 个解决方案

解决方案1 1 2020-10-19 07:28:02

解决方案2 0 2020-10-19 06:08:58

解决方案1
1 2020-10-19 07:28:02

解决方案2
0 2020-10-19 06:08:58