在线代码编辑器

一、常用在线代码编辑器

1.monaco-editor

github源码地址
官网下载地址

典型示例：
leetcode-cn（力扣）
nacos配置中心

支持以下语法或文件后缀

abap、apex、azcli、bat、bicep、cameligo、clojure、coffee、cpp、csharp、csp、css、dart、dockerfile、ecl、elixir、fsharp、go、graphql、handlebars、hcl、html、ini、java、javascript、julia、kotlin、less、lexon、liquid、lua、m3、markdown、mips、msdax、mysql、objective-c、pascal、pascaligo、perl、pgsql、php、postiats、powerquery、powershell、pug、python、r、razor、redis、redshift、restructuredtext、ruby、rust、sb、scala、scheme、scss、shell、solidity、sophia、sql、st、swift、systemverilog、tcl、twig、typescript、vb、xml、yaml

2.CodeMirror

github源码地址

典型示例：
www.runoob.com
www.w3school.com.cn

支持以下语法或文件后缀

CodeMirror.modeInfo = [
    {name: "APL", mime: "text/apl", mode: "apl", ext: ["dyalog", "apl"]},
    {name: "PGP", mimes: ["application/pgp", "application/pgp-encrypted", "application/pgp-keys", "application/pgp-signature"], mode: "asciiarmor", ext: ["asc", "pgp", "sig"]},
    {name: "ASN.1", mime: "text/x-ttcn-asn", mode: "asn.1", ext: ["asn", "asn1"]},
    {name: "Asterisk", mime: "text/x-asterisk", mode: "asterisk", file: /^extensions\.conf$/i},
    {name: "Brainfuck", mime: "text/x-brainfuck", mode: "brainfuck", ext: ["b", "bf"]},
    {name: "C", mime: "text/x-csrc", mode: "clike", ext: ["c", "h", "ino"]},
    {name: "C++", mime: "text/x-c++src", mode: "clike", ext: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"], alias: ["cpp"]},
    {name: "Cobol", mime: "text/x-cobol", mode: "cobol", ext: ["cob", "cpy"]},
    {name: "C#", mime: "text/x-csharp", mode: "clike", ext: ["cs"], alias: ["csharp", "cs"]},
    {name: "Clojure", mime: "text/x-clojure", mode: "clojure", ext: ["clj", "cljc", "cljx"]},
    {name: "ClojureScript", mime: "text/x-clojurescript", mode: "clojure", ext: ["cljs"]},
    {name: "Closure Stylesheets (GSS)", mime: "text/x-gss", mode: "css", ext: ["gss"]},
    {name: "CMake", mime: "text/x-cmake", mode: "cmake", ext: ["cmake", "cmake.in"], file: /^CMakeLists\.txt$/},
    {name: "CoffeeScript", mimes: ["application/vnd.coffeescript", "text/coffeescript", "text/x-coffeescript"], mode: "coffeescript", ext: ["coffee"], alias: ["coffee", "coffee-script"]},
    {name: "Common Lisp", mime: "text/x-common-lisp", mode: "commonlisp", ext: ["cl", "lisp", "el"], alias: ["lisp"]},
    {name: "Cypher", mime: "application/x-cypher-query", mode: "cypher", ext: ["cyp", "cypher"]},
    {name: "Cython", mime: "text/x-cython", mode: "python", ext: ["pyx", "pxd", "pxi"]},
    {name: "Crystal", mime: "text/x-crystal", mode: "crystal", ext: ["cr"]},
    {name: "CSS", mime: "text/css", mode: "css", ext: ["css"]},
    {name: "CQL", mime: "text/x-cassandra", mode: "sql", ext: ["cql"]},
    {name: "D", mime: "text/x-d", mode: "d", ext: ["d"]},
    {name: "Dart", mimes: ["application/dart", "text/x-dart"], mode: "dart", ext: ["dart"]},
    {name: "diff", mime: "text/x-diff", mode: "diff", ext: ["diff", "patch"]},
    {name: "Django", mime: "text/x-django", mode: "django"},
    {name: "Dockerfile", mime: "text/x-dockerfile", mode: "dockerfile", file: /^Dockerfile$/},
    {name: "DTD", mime: "application/xml-dtd", mode: "dtd", ext: ["dtd"]},
    {name: "Dylan", mime: "text/x-dylan", mode: "dylan", ext: ["dylan", "dyl", "intr"]},
    {name: "EBNF", mime: "text/x-ebnf", mode: "ebnf"},
    {name: "ECL", mime: "text/x-ecl", mode: "ecl", ext: ["ecl"]},
    {name: "edn", mime: "application/edn", mode: "clojure", ext: ["edn"]},
    {name: "Eiffel", mime: "text/x-eiffel", mode: "eiffel", ext: ["e"]},
    {name: "Elm", mime: "text/x-elm", mode: "elm", ext: ["elm"]},
    {name: "Embedded JavaScript", mime: "application/x-ejs", mode: "htmlembedded", ext: ["ejs"]},
    {name: "Embedded Ruby", mime: "application/x-erb", mode: "htmlembedded", ext: ["erb"]},
    {name: "Erlang", mime: "text/x-erlang", mode: "erlang", ext: ["erl"]},
    {name: "Esper", mime: "text/x-esper", mode: "sql"},
    {name: "Factor", mime: "text/x-factor", mode: "factor", ext: ["factor"]},
    {name: "FCL", mime: "text/x-fcl", mode: "fcl"},
    {name: "Forth", mime: "text/x-forth", mode: "forth", ext: ["forth", "fth", "4th"]},
    {name: "Fortran", mime: "text/x-fortran", mode: "fortran", ext: ["f", "for", "f77", "f90", "f95"]},
    {name: "F#", mime: "text/x-fsharp", mode: "mllike", ext: ["fs"], alias: ["fsharp"]},
    {name: "Gas", mime: "text/x-gas", mode: "gas", ext: ["s"]},
    {name: "Gherkin", mime: "text/x-feature", mode: "gherkin", ext: ["feature"]},
    {name: "GitHub Flavored Markdown", mime: "text/x-gfm", mode: "gfm", file: /^(readme|contributing|history)\.md$/i},
    {name: "Go", mime: "text/x-go", mode: "go", ext: ["go"]},
    {name: "Groovy", mime: "text/x-groovy", mode: "groovy", ext: ["groovy", "gradle"], file: /^Jenkinsfile$/},
    {name: "HAML", mime: "text/x-haml", mode: "haml", ext: ["haml"]},
    {name: "Haskell", mime: "text/x-haskell", mode: "haskell", ext: ["hs"]},
    {name: "Haskell (Literate)", mime: "text/x-literate-haskell", mode: "haskell-literate", ext: ["lhs"]},
    {name: "Haxe", mime: "text/x-haxe", mode: "haxe", ext: ["hx"]},
    {name: "HXML", mime: "text/x-hxml", mode: "haxe", ext: ["hxml"]},
    {name: "ASP.NET", mime: "application/x-aspx", mode: "htmlembedded", ext: ["aspx"], alias: ["asp", "aspx"]},
    {name: "HTML", mime: "text/html", mode: "htmlmixed", ext: ["html", "htm", "handlebars", "hbs"], alias: ["xhtml"]},
    {name: "HTTP", mime: "message/http", mode: "http"},
    {name: "IDL", mime: "text/x-idl", mode: "idl", ext: ["pro"]},
    {name: "Pug", mime: "text/x-pug", mode: "pug", ext: ["jade", "pug"], alias: ["jade"]},
    {name: "Java", mime: "text/x-java", mode: "clike", ext: ["java"]},
    {name: "Java Server Pages", mime: "application/x-jsp", mode: "htmlembedded", ext: ["jsp"], alias: ["jsp"]},
    {name: "JavaScript", mimes: ["text/javascript", "text/ecmascript", "application/javascript", "application/x-javascript", "application/ecmascript"],
     mode: "javascript", ext: ["js"], alias: ["ecmascript", "js", "node"]},
    {name: "JSON", mimes: ["application/json", "application/x-json"], mode: "javascript", ext: ["json", "map"], alias: ["json5"]},
    {name: "JSON-LD", mime: "application/ld+json", mode: "javascript", ext: ["jsonld"], alias: ["jsonld"]},
    {name: "JSX", mime: "text/jsx", mode: "jsx", ext: ["jsx"]},
    {name: "Jinja2", mime: "text/jinja2", mode: "jinja2", ext: ["j2", "jinja", "jinja2"]},
    {name: "Julia", mime: "text/x-julia", mode: "julia", ext: ["jl"], alias: ["jl"]},
    {name: "Kotlin", mime: "text/x-kotlin", mode: "clike", ext: ["kt"]},
    {name: "LESS", mime: "text/x-less", mode: "css", ext: ["less"]},
    {name: "LiveScript", mime: "text/x-livescript", mode: "livescript", ext: ["ls"], alias: ["ls"]},
    {name: "Lua", mime: "text/x-lua", mode: "lua", ext: ["lua"]},
    {name: "Markdown", mime: "text/x-markdown", mode: "markdown", ext: ["markdown", "md", "mkd"]},
    {name: "mIRC", mime: "text/mirc", mode: "mirc"},
    {name: "MariaDB SQL", mime: "text/x-mariadb", mode: "sql"},
    {name: "Mathematica", mime: "text/x-mathematica", mode: "mathematica", ext: ["m", "nb", "wl", "wls"]},
    {name: "Modelica", mime: "text/x-modelica", mode: "modelica", ext: ["mo"]},
    {name: "MUMPS", mime: "text/x-mumps", mode: "mumps", ext: ["mps"]},
    {name: "MS SQL", mime: "text/x-mssql", mode: "sql"},
    {name: "mbox", mime: "application/mbox", mode: "mbox", ext: ["mbox"]},
    {name: "MySQL", mime: "text/x-mysql", mode: "sql"},
    {name: "Nginx", mime: "text/x-nginx-conf", mode: "nginx", file: /nginx.*\.conf$/i},
    {name: "NSIS", mime: "text/x-nsis", mode: "nsis", ext: ["nsh", "nsi"]},
    {name: "NTriples", mimes: ["application/n-triples", "application/n-quads", "text/n-triples"],
     mode: "ntriples", ext: ["nt", "nq"]},
    {name: "Objective-C", mime: "text/x-objectivec", mode: "clike", ext: ["m"], alias: ["objective-c", "objc"]},
    {name: "Objective-C++", mime: "text/x-objectivec++", mode: "clike", ext: ["mm"], alias: ["objective-c++", "objc++"]},
    {name: "OCaml", mime: "text/x-ocaml", mode: "mllike", ext: ["ml", "mli", "mll", "mly"]},
    {name: "Octave", mime: "text/x-octave", mode: "octave", ext: ["m"]},
    {name: "Oz", mime: "text/x-oz", mode: "oz", ext: ["oz"]},
    {name: "Pascal", mime: "text/x-pascal", mode: "pascal", ext: ["p", "pas"]},
    {name: "PEG.js", mime: "null", mode: "pegjs", ext: ["jsonld"]},
    {name: "Perl", mime: "text/x-perl", mode: "perl", ext: ["pl", "pm"]},
    {name: "PHP", mimes: ["text/x-php", "application/x-httpd-php", "application/x-httpd-php-open"], mode: "php", ext: ["php", "php3", "php4", "php5", "php7", "phtml"]},
    {name: "Pig", mime: "text/x-pig", mode: "pig", ext: ["pig"]},
    {name: "Plain Text", mime: "text/plain", mode: "null", ext: ["txt", "text", "conf", "def", "list", "log"]},
    {name: "PLSQL", mime: "text/x-plsql", mode: "sql", ext: ["pls"]},
    {name: "PostgreSQL", mime: "text/x-pgsql", mode: "sql"},
    {name: "PowerShell", mime: "application/x-powershell", mode: "powershell", ext: ["ps1", "psd1", "psm1"]},
    {name: "Properties files", mime: "text/x-properties", mode: "properties", ext: ["properties", "ini", "in"], alias: ["ini", "properties"]},
    {name: "ProtoBuf", mime: "text/x-protobuf", mode: "protobuf", ext: ["proto"]},
    {name: "Python", mime: "text/x-python", mode: "python", ext: ["BUILD", "bzl", "py", "pyw"], file: /^(BUCK|BUILD)$/},
    {name: "Puppet", mime: "text/x-puppet", mode: "puppet", ext: ["pp"]},
    {name: "Q", mime: "text/x-q", mode: "q", ext: ["q"]},
    {name: "R", mime: "text/x-rsrc", mode: "r", ext: ["r", "R"], alias: ["rscript"]},
    {name: "reStructuredText", mime: "text/x-rst", mode: "rst", ext: ["rst"], alias: ["rst"]},
    {name: "RPM Changes", mime: "text/x-rpm-changes", mode: "rpm"},
    {name: "RPM Spec", mime: "text/x-rpm-spec", mode: "rpm", ext: ["spec"]},
    {name: "Ruby", mime: "text/x-ruby", mode: "ruby", ext: ["rb"], alias: ["jruby", "macruby", "rake", "rb", "rbx"]},
    {name: "Rust", mime: "text/x-rustsrc", mode: "rust", ext: ["rs"]},
    {name: "SAS", mime: "text/x-sas", mode: "sas", ext: ["sas"]},
    {name: "Sass", mime: "text/x-sass", mode: "sass", ext: ["sass"]},
    {name: "Scala", mime: "text/x-scala", mode: "clike", ext: ["scala"]},
    {name: "Scheme", mime: "text/x-scheme", mode: "scheme", ext: ["scm", "ss"]},
    {name: "SCSS", mime: "text/x-scss", mode: "css", ext: ["scss"]},
    {name: "Shell", mimes: ["text/x-sh", "application/x-sh"], mode: "shell", ext: ["sh", "ksh", "bash"], alias: ["bash", "sh", "zsh"], file: /^PKGBUILD$/},
    {name: "Sieve", mime: "application/sieve", mode: "sieve", ext: ["siv", "sieve"]},
    {name: "Slim", mimes: ["text/x-slim", "application/x-slim"], mode: "slim", ext: ["slim"]},
    {name: "Smalltalk", mime: "text/x-stsrc", mode: "smalltalk", ext: ["st"]},
    {name: "Smarty", mime: "text/x-smarty", mode: "smarty", ext: ["tpl"]},
    {name: "Solr", mime: "text/x-solr", mode: "solr"},
    {name: "SML", mime: "text/x-sml", mode: "mllike", ext: ["sml", "sig", "fun", "smackspec"]},
    {name: "Soy", mime: "text/x-soy", mode: "soy", ext: ["soy"], alias: ["closure template"]},
    {name: "SPARQL", mime: "application/sparql-query", mode: "sparql", ext: ["rq", "sparql"], alias: ["sparul"]},
    {name: "Spreadsheet", mime: "text/x-spreadsheet", mode: "spreadsheet", alias: ["excel", "formula"]},
    {name: "SQL", mime: "text/x-sql", mode: "sql", ext: ["sql"]},
    {name: "SQLite", mime: "text/x-sqlite", mode: "sql"},
    {name: "Squirrel", mime: "text/x-squirrel", mode: "clike", ext: ["nut"]},
    {name: "Stylus", mime: "text/x-styl", mode: "stylus", ext: ["styl"]},
    {name: "Swift", mime: "text/x-swift", mode: "swift", ext: ["swift"]},
    {name: "sTeX", mime: "text/x-stex", mode: "stex"},
    {name: "LaTeX", mime: "text/x-latex", mode: "stex", ext: ["text", "ltx", "tex"], alias: ["tex"]},
    {name: "SystemVerilog", mime: "text/x-systemverilog", mode: "verilog", ext: ["v", "sv", "svh"]},
    {name: "Tcl", mime: "text/x-tcl", mode: "tcl", ext: ["tcl"]},
    {name: "Textile", mime: "text/x-textile", mode: "textile", ext: ["textile"]},
    {name: "TiddlyWiki", mime: "text/x-tiddlywiki", mode: "tiddlywiki"},
    {name: "Tiki wiki", mime: "text/tiki", mode: "tiki"},
    {name: "TOML", mime: "text/x-toml", mode: "toml", ext: ["toml"]},
    {name: "Tornado", mime: "text/x-tornado", mode: "tornado"},
    {name: "troff", mime: "text/troff", mode: "troff", ext: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]},
    {name: "TTCN", mime: "text/x-ttcn", mode: "ttcn", ext: ["ttcn", "ttcn3", "ttcnpp"]},
    {name: "TTCN_CFG", mime: "text/x-ttcn-cfg", mode: "ttcn-cfg", ext: ["cfg"]},
    {name: "Turtle", mime: "text/turtle", mode: "turtle", ext: ["ttl"]},
    {name: "TypeScript", mime: "application/typescript", mode: "javascript", ext: ["ts"], alias: ["ts"]},
    {name: "TypeScript-JSX", mime: "text/typescript-jsx", mode: "jsx", ext: ["tsx"], alias: ["tsx"]},
    {name: "Twig", mime: "text/x-twig", mode: "twig"},
    {name: "Web IDL", mime: "text/x-webidl", mode: "webidl", ext: ["webidl"]},
    {name: "VB.NET", mime: "text/x-vb", mode: "vb", ext: ["vb"]},
    {name: "VBScript", mime: "text/vbscript", mode: "vbscript", ext: ["vbs"]},
    {name: "Velocity", mime: "text/velocity", mode: "velocity", ext: ["vtl"]},
    {name: "Verilog", mime: "text/x-verilog", mode: "verilog", ext: ["v"]},
    {name: "VHDL", mime: "text/x-vhdl", mode: "vhdl", ext: ["vhd", "vhdl"]},
    {name: "Vue.js Component", mimes: ["script/x-vue", "text/x-vue"], mode: "vue", ext: ["vue"]},
    {name: "XML", mimes: ["application/xml", "text/xml"], mode: "xml", ext: ["xml", "xsl", "xsd", "svg"], alias: ["rss", "wsdl", "xsd"]},
    {name: "XQuery", mime: "application/xquery", mode: "xquery", ext: ["xy", "xquery"]},
    {name: "Yacas", mime: "text/x-yacas", mode: "yacas", ext: ["ys"]},
    {name: "YAML", mimes: ["text/x-yaml", "text/yaml"], mode: "yaml", ext: ["yaml", "yml"], alias: ["yml"]},
    {name: "Z80", mime: "text/x-z80", mode: "z80", ext: ["z80"]},
    {name: "mscgen", mime: "text/x-mscgen", mode: "mscgen", ext: ["mscgen", "mscin", "msc"]},
    {name: "xu", mime: "text/x-xu", mode: "mscgen", ext: ["xu"]},
    {name: "msgenny", mime: "text/x-msgenny", mode: "mscgen", ext: ["msgenny"]},
    {name: "WebAssembly", mime: "text/webassembly", mode: "wast", ext: ["wat", "wast"]},
  ];

3.ace editor

github源码地址

典型示例：
drools工作控制台business-central

支持以下语法或文件后缀

behaviour、coffee、css、folding、html、javascript、json、lua、php、xml、xquery、abap.js、abap_highlight_rules.js、abc.js、abc_highlight_rules.js、actionscript.js、actionscript_highlight_rules.js、ada.js、ada_highlight_rules.js、ada_test.js、alda.js、alda_highlight_rules.js、apache_conf.js、apache_conf_highlight_rules.js、apex.js、apex_highlight_rules.js、applescript.js、applescript_highlight_rules.js、aql.js、aql_highlight_rules.js、asciidoc.js、asciidoc_highlight_rules.js、asl.js、asl_highlight_rules.js、assembly_x86.js、assembly_x86_highlight_rules.js、autohotkey.js、autohotkey_highlight_rules.js、batchfile.js、batchfile_highlight_rules.js、behaviour.js、c9search.js、c9search_highlight_rules.js、c_cpp.js、c_cpp_highlight_rules.js、cirru.js、cirru_highlight_rules.js、clojure.js、clojure_highlight_rules.js、cobol.js、cobol_highlight_rules.js、coffee.js、coffee_highlight_rules.js、coffee_worker.js、coldfusion.js、coldfusion_highlight_rules.js、coldfusion_test.js、crystal.js、crystal_highlight_rules.js、csharp.js、csharp_highlight_rules.js、csound_document.js、csound_document_highlight_rules.js、csound_orchestra.js、csound_orchestra_highlight_rules.js、csound_preprocessor_highlight_rules.js、csound_score.js、csound_score_highlight_rules.js、csp.js、csp_highlight_rules.js、css.js、css_completions.js、css_highlight_rules.js、css_test.js、css_worker.js、css_worker_test.js、curly.js、curly_highlight_rules.js、d.js、d_highlight_rules.js、dart.js、dart_highlight_rules.js、diff.js、diff_highlight_rules.js、django.js、doc_comment_highlight_rules.js、dockerfile.js、dockerfile_highlight_rules.js、dot.js、dot_highlight_rules.js、drools.js、drools_highlight_rules.js、edifact.js、edifact_highlight_rules.js、eiffel.js、eiffel_highlight_rules.js、ejs.js、elixir.js、elixir_highlight_rules.js、elm.js、elm_highlight_rules.js、erlang.js、erlang_highlight_rules.js、forth.js、forth_highlight_rules.js、fortran.js、fortran_highlight_rules.js、fsharp.js、fsharp_highlight_rules.js、fsl.js、fsl_highlight_rules.js、ftl.js、ftl_highlight_rules.js、gcode.js、gcode_highlight_rules.js、gherkin.js、gherkin_highlight_rules.js、gitignore.js、gitignore_highlight_rules.js、glsl.js、glsl_highlight_rules.js、gobstones.js、gobstones_highlight_rules.js、golang.js、golang_highlight_rules.js、graphqlschema.js、graphqlschema_highlight_rules.js、groovy.js、groovy_highlight_rules.js、haml.js、haml_highlight_rules.js、handlebars.js、handlebars_highlight_rules.js、haskell.js、haskell_cabal.js、haskell_cabal_highlight_rules.js、haskell_highlight_rules.js、haxe.js、haxe_highlight_rules.js、hjson.js、hjson_highlight_rules.js、html.js、html_completions.js、html_elixir.js、html_elixir_highlight_rules.js、html_highlight_rules.js、html_ruby.js、html_ruby_highlight_rules.js、html_test.js、html_worker.js、ini.js、ini_highlight_rules.js、io.js、io_highlight_rules.js、jack.js、jack_highlight_rules.js、jade.js、jade_highlight_rules.js、java.js、java_highlight_rules.js、javascript.js、javascript_highlight_rules.js、javascript_test.js、javascript_worker.js、javascript_worker_test.js、js_regex_highlight_rules.js、json.js、json5.js、json5_highlight_rules.js、json_highlight_rules.js、json_worker.js、json_worker_test.js、jsoniq.js、jsp.js、jsp_highlight_rules.js、jssm.js、jssm_highlight_rules.js、jsx.js、jsx_highlight_rules.js、julia.js、julia_highlight_rules.js、kotlin.js、kotlin_highlight_rules.js、latex.js、latex_highlight_rules.js、latte.js、latte_highlight_rules.js、less.js、less_highlight_rules.js、liquid.js、liquid_highlight_rules.js、lisp.js、lisp_highlight_rules.js、livescript.js、logiql.js、logiql_highlight_rules.js、logiql_test.js、logtalk.js、logtalk_highlight_rules.js、lsl.js、lsl_highlight_rules.js、lua.js、lua_highlight_rules.js、lua_worker.js、luapage.js、luapage_highlight_rules.js、lucene.js、lucene_highlight_rules.js、makefile.js、makefile_highlight_rules.js、markdown.js、markdown_highlight_rules.js、mask.js、mask_highlight_rules.js、matching_brace_outdent.js、matching_parens_outdent.js、matlab.js、matlab_highlight_rules.js、maze.js、maze_highlight_rules.js、mediawiki.js、mediawiki_highlight_rules.js、mel.js、mel_highlight_rules.js、mips.js、mips_highlight_rules.js、mixal.js、mixal_highlight_rules.js、mushcode.js、mushcode_highlight_rules.js、mysql.js、mysql_highlight_rules.js、nginx.js、nginx_highlight_rules.js、nim.js、nim_highlight_rules.js、nix.js、nix_highlight_rules.js、nsis.js、nsis_highlight_rules.js、nunjucks.js、nunjucks_highlight_rules.js、objectivec.js、objectivec_highlight_rules.js、ocaml.js、ocaml_highlight_rules.js、pascal.js、pascal_highlight_rules.js、perl.js、perl_highlight_rules.js、pgsql.js、pgsql_highlight_rules.js、php.js、php_completions.js、php_highlight_rules.js、php_laravel_blade.js、php_laravel_blade_highlight_rules.js、php_test.js、php_worker.js、pig.js、pig_highlight_rules.js、plain_text.js、plain_text_test.js、powershell.js、powershell_highlight_rules.js、praat.js、praat_highlight_rules.js、prisma.js、prisma_highlight_rules.js、prolog.js、prolog_highlight_rules.js、properties.js、properties_highlight_rules.js、protobuf.js、protobuf_highlight_rules.js、puppet.js、puppet_highlight_rules.js、python.js、python_highlight_rules.js、python_test.js、qml.js、qml_highlight_rules.js、r.js、r_highlight_rules.js、raku.js、raku_highlight_rules.js、razor.js、razor_completions.js、razor_highlight_rules.js、rdoc.js、rdoc_highlight_rules.js、red.js、red_highlight_rules.js、redshift.js、redshift_highlight_rules.js、rhtml.js、rhtml_highlight_rules.js、rst.js、rst_highlight_rules.js、ruby.js、ruby_highlight_rules.js、ruby_test.js、rust.js、rust_highlight_rules.js、sass.js、sass_highlight_rules.js、scad.js、scad_highlight_rules.js、scala.js、scala_highlight_rules.js、scheme.js、scheme_highlight_rules.js、scss.js、scss_highlight_rules.js、sh.js、sh_highlight_rules.js、sjs.js、sjs_highlight_rules.js、slim.js、slim_highlight_rules.js、smarty.js、smarty_highlight_rules.js、smithy.js、smithy_highlight_rules.js、snippets.js、soy_template.js、soy_template_highlight_rules.js、space.js、space_highlight_rules.js、sparql.js、sparql_highlight_rules.js、sql.js、sql_highlight_rules.js、sqlserver.js、sqlserver_highlight_rules.js、stylus.js、stylus_highlight_rules.js、svg.js、svg_highlight_rules.js、swift.js、swift_highlight_rules.js、tcl.js、tcl_highlight_rules.js、terraform.js、terraform_highlight_rules.js、tex.js、tex_highlight_rules.js、text.js、text_highlight_rules.js、text_test.js、textile.js、textile_highlight_rules.js、toml.js、toml_highlight_rules.js、tsx.js、turtle.js、turtle_highlight_rules.js、twig.js、twig_highlight_rules.js、typescript.js、typescript_highlight_rules.js、vala.js、vala_highlight_rules.js、vbscript.js、vbscript_highlight_rules.js、vbscript_test.js、velocity.js、velocity_highlight_rules.js、verilog.js、verilog_highlight_rules.js、vhdl.js、vhdl_highlight_rules.js、visualforce.js、visualforce_highlight_rules.js、wollok.js、wollok_highlight_rules.js、xml.js、xml_highlight_rules.js、xml_test.js、xml_worker.js、xquery.js、xquery_worker.js、yaml.js、yaml_highlight_rules.js、zeek.js、zeek_highlight_rules.js、

二、功能对比

基于JavaScript的代码编辑器的比较和选型

三、代码示例

1.ace editor

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.17.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>drools</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>drools</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
        <drools.version>7.11.0.Final</drools.version>
        <jquery.version>3.5.1</jquery.version>
        <layui.version>2.5.6</layui.version>
        <ace.version>1.4.12</ace.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- drools -->
<!--        <dependency>-->
<!--            <groupId>org.kie</groupId>-->
<!--            <artifactId>kie-spring</artifactId>-->
<!--            <version>${drools.version}</version>-->
<!--        </dependency>-->

<!--        <dependency>-->
<!--            <groupId>org.drools</groupId>-->
<!--            <artifactId>drools-templates</artifactId>-->
<!--            <version>${drools.version}</version>-->
<!--        </dependency>-->

        <!-- webjars -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>${jquery.version}</version>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>layui</artifactId>
            <version>${layui.version}</version>
        </dependency>

        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>ace-builds</artifactId>
            <version>${ace.version}</version>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>主页</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/webjars/layui/2.5.6/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.js}" charset="utf-8"></script>
    <script th:src="@{/webjars/layui/2.5.6/layui.js}" charset="utf-8"></script>
    <script th:src="@{/webjars/ace-builds/1.4.12/src/ace.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/webjars/ace-builds/1.4.12/src/ext-language_tools.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div style="width: 1000px;height:800px;margin: 50px auto">
    <form id="formId" class="layui-form layui-form-pane" action="">

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">脚本集</label>
            <div class="layui-input-block">
                <div id="editor" style="height: 600px"></div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text" style="text-align: center">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">校验</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>


<script th:inline="javascript" type="text/javascript">
    $(function () {
        layui.use(['form', 'layer'], function () {
            var form = layui.form
                , layer = layui.layer

            //监听提交
            form.on('submit(demo1)', function(data){
                console.log(editor.getValue());
                return false;
            });

            $("form").on('reset', function () {
                editor.setValue("");
            });

        });

        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/github");
        editor.session.setMode("ace/mode/drools");
        document.getElementById('editor').style.fontSize='16px';
        editor.setOptions({
            autoScrollEditorIntoView: true,
            copyWithEmptySelection: true,
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: false,
            // 只读
            readOnly: true,
            // 显示打印边距线
            showPrintMargin: false,
            // 字体大小
            fontSize: this.code.fontSize
        });

    });
</script>

</body>
</html>

• drools在线编辑器

虽然ace editor自带drools语法识别规则，但是ace editor的语法识别规则比较低级，建议使用drools官方的mode-drools.js增强。
drools-wb源码地址
下面是drools官方自己封装的ace通用组件（注意jar包不包含mode-drools.js，需要额外引入）

        <dependency>
            <groupId>org.uberfire</groupId>
            <artifactId>uberfire-widgets-core-ace</artifactId>
            <version>${drools.version}</version>
        </dependency>

https://github.com/kiegroup/drools-wb/blob/master/drools-wb-screens/drools-wb-drl-text-editor/drools-wb-drl-text-editor-client/src/main/resources/org/drools/workbench/screens/drltext/public/ace/mode-drools.js

drools官方在mode-drools.js增加了许多语法校验规则，ace editor 的mode-drools.js代码行数不到500行，drools官方行数有1400多行。