文章目錄

• • • 一、常用在線代碼編輯器
    • • 1.monaco-editor
      • 2.CodeMirror
      • 3.ace editor
    • 二、功能對比
    • 三、代碼示例
    • • 1.ace editor

一、常用在線代碼編輯器

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多行。

總結

以上是生活随笔為你收集整理的在线代码编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。