Ace Editor - Can please someone tell me what is wrong with require()?
Question
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
});
});
1 answers
solution1
0 2017-04-26 09:40:53
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Someone please tell me what is wrong with my $.parseJSON [javascript / jquery]
I am learning to code, can someone please tell me what is wrong?
Can someone please tell me where I went wrong?
Can someone tell me what am i doing wrong
can someone tell me what is wrong with this JS alarm
Can someone tell me what is wrong with this java script?
Can someone tell me what's wrong with this javascript?
Can anyone please tell me what's wrong this socket event?
Can someone please tell me why this code wont run?
Can someone please tell me how to read the following: /\.(js)$/
Related Tags