2017-04-26 94 views
0

我一直在挣扎2天,试图在ace编辑器中扩展突出显示规则。看起来我遵循了教程中的说明,但工具提示(或突出显示规则)似乎没有工作。有人可以告诉我什么是我的代码错误..?它似乎读到'var oop = require(“../ lib/oop”);'但没有比这更多。什么是requireJS?这似乎是问题...提前谢谢你!Ace编辑器 - 可以请别人告诉我require()有什么问题?

王牌编辑样品: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 

}); 
    }); 

+0

requireJS是文件/模块加载器,让您在浏览器中使用模块化的代码。我对Ace Editor一无所知,但可能不能使用模块化代码(例如:除非设置了加载程序,否则不能使用'require'从另一个文件加载文件)。 –

+0

我在上面的代码中添加了require.js,但它仍然不起作用。 –

回答

0

它的工作原理,尝试片断波纹管:

<!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>

+0

感谢您检查!编辑器会加载,但是当在ace样本链接上显示的代码上悬停时,工具提示仍然不起作用:'(当我找到解决此问题的解决方案时,我会进行更新..! –

+0

什么工具提示?在你的问题中看不到任何东西 –

+0

王牌似乎称之为highlightRules,但它看起来像是每个文本代码的工具提示。当你将鼠标悬停在本演示右侧的代码上时,它会显示https:/ /ace.c9.io/tool/mode_creator.html。 –

相关问题