Use ACE Editor for Java Language in web

Question

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

Well yes, a text editor doesn't compile code; a compiler does that. The ACE website you linked to has a list of features; do you see anything about compiling there? — kaya3, Oct 19 '20 at 05:55

score 1 · Answer 1 · answered Oct 19 '20 at 07:28

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 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.)

G.W Kalpa Sathjana De Silva · Answer 2 · 2020-10-19T06:24:59.633

0

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 : link

edited Oct 19 '20 at 06:24

answered Oct 19 '20 at 06:08

G.W Kalpa Sathjana De Silva

209
2
10

Use ACE Editor for Java Language in web

2 Answers2