CODEWITHSUNDEEP
javascriptrequirejsace-editor
Jin Park
Jin Park

Reputation: 11

Ace Editor - Can please someone tell me what is wrong with require()?

I've been struggling for 2 days trying to extend highlighting rules in ace editor.. It seems I've followed the instructions from the tutorial, but the tool tip (or the highlighting rule) doesn't seem to be working. Can someone please tell me what is wrong with my code..? It seems to read up to 'var oop = require("../lib/oop");' but no more than that. what exactly is requireJS? That seems to be the problem... Thank you in advance!!

Ace editor sample: https://ace.c9.io/tool/mode_creator.html

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo!!</title>
<style type="text/css" media="screen">
body {
    overflow: hidden;
}

#editor { 
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

 </style>


import java.util.*;
import java.io.*;

public class TestClass{

 }</pre>
 <script src="./resources/js/jquery-3.1.1.js"></script>
 <!-- load ace -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"
type="text/javascript" charset="utf-8"></script>

 <!-- load ace language tools -->
<script src="./resources/js/ext-language_tools.js"></script>

<script>
$(document).ready(function() {
define('ace/mode/java', function(require, exports, module) {

    "use strict";

    var oop = require("../lib/oop");
    console.log(":)"+oop);
    var DocCommentHighlightRules = require("./doc_comment_highlight_rules").DocCommentHighlightRules;
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;



    var JavaHighlightRules = function() {

        // taken from http://download.oracle.com/javase/tutorial/java/nutsandbolts/_keywords.html
        var keywords = (
        "abstract|continue|for|new|switch|" +
        "assert|default|goto|package|synchronized|" +
        "boolean|do|if|private|this|" +
        "break|double|implements|protected|throw|" +
        "byte|else|import|public|throws|" +
        "case|enum|instanceof|return|transient|" +
        "catch|extends|int|short|try|" +
        "char|final|interface|static|void|" +
        "class|finally|long|strictfp|volatile|" +
        "const|float|native|super|while"
        );

        var buildinConstants = ("null|Infinity|NaN|undefined");


        var langClasses = (
            "AbstractMethodError|AssertionError|ClassCircularityError|"+
            "ClassFormatError|Deprecated|EnumConstantNotPresentException|"+
            "ExceptionInInitializerError|IllegalAccessError|"+
            "IllegalThreadStateException|InstantiationError|InternalError|"+
            "NegativeArraySizeException|NoSuchFieldError|Override|Process|"+
            "ProcessBuilder|SecurityManager|StringIndexOutOfBoundsException|"+
            "SuppressWarnings|TypeNotPresentException|UnknownError|"+
            "UnsatisfiedLinkError|UnsupportedClassVersionError|VerifyError|"+
            "InstantiationException|IndexOutOfBoundsException|"+
            "ArrayIndexOutOfBoundsException|CloneNotSupportedException|"+
            "NoSuchFieldException|IllegalArgumentException|NumberFormatException|"+
            "SecurityException|Void|InheritableThreadLocal|IllegalStateException|"+
            "InterruptedException|NoSuchMethodException|IllegalAccessException|"+
            "UnsupportedOperationException|Enum|StrictMath|Package|Compiler|"+
            "Readable|Runtime|StringBuilder|Math|IncompatibleClassChangeError|"+
            "NoSuchMethodError|ThreadLocal|RuntimePermission|ArithmeticException|"+
            "NullPointerException|Long|Integer|Short|Byte|Double|Number|Float|"+
            "Character|Boolean|StackTraceElement|Appendable|StringBuffer|"+
            "Iterable|ThreadGroup|Runnable|Thread|IllegalMonitorStateException|"+
            "StackOverflowError|OutOfMemoryError|VirtualMachineError|"+
            "ArrayStoreException|ClassCastException|LinkageError|"+
            "NoClassDefFoundError|ClassNotFoundException|RuntimeException|"+
            "Exception|ThreadDeath|Error|Throwable|System|ClassLoader|"+
            "Cloneable|Class|CharSequence|Comparable|String|Object"
        );

        var keywordMapper = this.createKeywordMapper({
            "variable.language": "this",
            "keyword": keywords,
            "constant.language": buildinConstants,
            "support.function": langClasses
        }, "identifier");

        // regexp must not have capturing parentheses. Use (?:) instead.
        // regexps are ordered -> the first match is used

        this.$rules = {
            "start" : [
                {
                    token : "comment",
                    regex : "\\/\\/.*$"
                },
                DocCommentHighlightRules.getStartRule("doc-start"),
                {
                    token : "comment", // multi line comment
                    regex : "\\/\\*",
                    next : "comment"
                }, {
                    token : "string", // single line
                    regex : '["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'
                }, {
                    token : "string", // single line
                    regex : "['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"
                }, {
                    token : "constant.numeric", // hex
                    regex : /0(?:[xX][0-9a-fA-F][0-9a-fA-F_]*|[bB][01][01_]*)[LlSsDdFfYy]?\b/
                }, {
                    token : "constant.numeric", // float
                    regex : /[+-]?\d[\d_]*(?:(?:\.[\d_]*)?(?:[eE][+-]?[\d_]+)?)?[LlSsDdFfYy]?\b/
                }, {
                    token : "constant.language.boolean",
                    regex : "(?:true|false)\\b"
                }, {
                    token : keywordMapper,
                    // TODO: Unicode escape sequences
                    // TODO: Unicode identifiers
                    regex : "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
                }, {
                    token : "keyword.operator",
                    regex : "!|\\$|%|&|\\*|\\-\\-|\\-|\\+\\+|\\+|~|===|==|=|!=|!==|<=|>=|<<=|>>=|>>>=|<>|<|>|!|&&|\\|\\||\\?\\:|\\*=|%=|\\+=|\\-=|&=|\\^=|\\b(?:in|instanceof|new|delete|typeof|void)"
                }, {
                    token : "lparen",
                    regex : "[[({]"
                }, {
                    token : "rparen",
                    regex : "[\\])}]"
                }, {
                    token : "text",
                    regex : "\\s+"
                }
            ],
            "comment" : [
                {
                    token : "comment", // closing comment
                    regex : ".*?\\*\\/",
                    next : "start"
                }, {
                    token : "comment", // comment spanning whole line
                    regex : ".+"
                }
            ]
        };

        this.embedRules(DocCommentHighlightRules, "doc-",
            [ DocCommentHighlightRules.getEndRule("start") ]);
    };

    oop.inherits(JavaHighlightRules, TextHighlightRules);

    exports.JavaHighlightRules = JavaHighlightRules;


});
 // trigger extension
   var langTools = ace.require("ace/ext/language_tools");
   var editor = ace.edit("editor");   
   editor.setTheme("ace/theme/monokai");   
var javamode = editor.session.setMode("ace/mode/java");
editor.setHighlightActiveLine(true);
//enable autocompletion and snippets
editor.setOptions({
   enableBasicAutocompletion: true,
   enableSnippets: false

 });
   });

Upvotes: 0

Views: 2747

Answers (1)

a user
a user

Reputation: 24149

It works, try the snippet bellow:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo!!</title>
<style type="text/css" media="screen">
body {
    overflow: hidden;
}

#editor { 
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

 </style>
<pre id="editor">
import java.util.*;
import java.io.*;

public class TestClass{

 }</pre>
 <!-- load ace -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"
type="text/javascript" charset="utf-8"></script>

 <!-- load ace language tools -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6//ext-language_tools.js"></script>

<script>
define('ace/mode/java', function(require, exports, module) {

    "use strict";

    var oop = require("../lib/oop");
    console.log(":)" + oop);
    var DocCommentHighlightRules = require("./doc_comment_highlight_rules").DocCommentHighlightRules;
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;

    var JavaHighlightRules = function() {

        // taken from http://download.oracle.com/javase/tutorial/java/nutsandbolts/_keywords.html
        var keywords = ("abstract|continue|for|new|switch|" + "assert|default|goto|package|synchronized|" + "boolean|do|if|private|this|" + "break|double|implements|protected|throw|" + "byte|else|import|public|throws|" + "case|enum|instanceof|return|transient|" + "catch|extends|int|short|try|" + "char|final|interface|static|void|" + "class|finally|long|strictfp|volatile|" + "const|float|native|super|while");

        var buildinConstants = ("null|Infinity|NaN|undefined");

        var langClasses = ("AbstractMethodError|AssertionError|ClassCircularityError|" + "ClassFormatError|Deprecated|EnumConstantNotPresentException|" + "ExceptionInInitializerError|IllegalAccessError|" + "IllegalThreadStateException|InstantiationError|InternalError|" + "NegativeArraySizeException|NoSuchFieldError|Override|Process|" + "ProcessBuilder|SecurityManager|StringIndexOutOfBoundsException|" + "SuppressWarnings|TypeNotPresentException|UnknownError|" + "UnsatisfiedLinkError|UnsupportedClassVersionError|VerifyError|" + "InstantiationException|IndexOutOfBoundsException|" + "ArrayIndexOutOfBoundsException|CloneNotSupportedException|" + "NoSuchFieldException|IllegalArgumentException|NumberFormatException|" + "SecurityException|Void|InheritableThreadLocal|IllegalStateException|" + "InterruptedException|NoSuchMethodException|IllegalAccessException|" + "UnsupportedOperationException|Enum|StrictMath|Package|Compiler|" + "Readable|Runtime|StringBuilder|Math|IncompatibleClassChangeError|" + "NoSuchMethodError|ThreadLocal|RuntimePermission|ArithmeticException|" + "NullPointerException|Long|Integer|Short|Byte|Double|Number|Float|" + "Character|Boolean|StackTraceElement|Appendable|StringBuffer|" + "Iterable|ThreadGroup|Runnable|Thread|IllegalMonitorStateException|" + "StackOverflowError|OutOfMemoryError|VirtualMachineError|" + "ArrayStoreException|ClassCastException|LinkageError|" + "NoClassDefFoundError|ClassNotFoundException|RuntimeException|" + "Exception|ThreadDeath|Error|Throwable|System|ClassLoader|" + "Cloneable|Class|CharSequence|Comparable|String|Object");

        var keywordMapper = this.createKeywordMapper({
            "variable.language": "this",
            "keyword": keywords,
            "constant.language": buildinConstants,
            "support.function": langClasses
        }, "identifier");

        // regexp must not have capturing parentheses. Use (?:) instead.
        // regexps are ordered -> the first match is used

        this.$rules = {
            "start": [{
                token: "comment",
                regex: "\\/\\/.*$"
            }, DocCommentHighlightRules.getStartRule("doc-start"), {
                token: "comment",
                // multi line comment
                regex: "\\/\\*",
                next: "comment"
            }, {
                token: "string",
                // single line
                regex: '["](?:(?:\\\\.)|(?:[^"\\\\]))*?["]'
            }, {
                token: "string",
                // single line
                regex: "['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']"
            }, {
                token: "constant.numeric",
                // hex
                regex: /0(?:[xX][0-9a-fA-F][0-9a-fA-F_]*|[bB][01][01_]*)[LlSsDdFfYy]?\b/
            }, {
                token: "constant.numeric",
                // float
                regex: /[+-]?\d[\d_]*(?:(?:\.[\d_]*)?(?:[eE][+-]?[\d_]+)?)?[LlSsDdFfYy]?\b/
            }, {
                token: "constant.language.boolean",
                regex: "(?:true|false)\\b"
            }, {
                token: keywordMapper,
                // TODO: Unicode escape sequences
                // TODO: Unicode identifiers
                regex: "[a-zA-Z_$][a-zA-Z0-9_$]*\\b"
            }, {
                token: "keyword.operator",
                regex: "!|\\$|%|&|\\*|\\-\\-|\\-|\\+\\+|\\+|~|===|==|=|!=|!==|<=|>=|<<=|>>=|>>>=|<>|<|>|!|&&|\\|\\||\\?\\:|\\*=|%=|\\+=|\\-=|&=|\\^=|\\b(?:in|instanceof|new|delete|typeof|void)"
            }, {
                token: "lparen",
                regex: "[[({]"
            }, {
                token: "rparen",
                regex: "[\\])}]"
            }, {
                token: "text",
                regex: "\\s+"
            }],
            "comment": [{
                token: "comment",
                // closing comment
                regex: ".*?\\*\\/",
                next: "start"
            }, {
                token: "comment",
                // comment spanning whole line
                regex: ".+"
            }]
        };

        this.embedRules(DocCommentHighlightRules, "doc-", [DocCommentHighlightRules.getEndRule("start")]);
    };

    oop.inherits(JavaHighlightRules, TextHighlightRules);

    exports.JavaHighlightRules = JavaHighlightRules;

});
// trigger extension
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
var javamode = editor.session.setMode("ace/mode/java");
editor.setHighlightActiveLine(true);
//enable autocompletion and snippets
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: false

});

   </script>

Upvotes: 0

Related Questions