Question

我正在加载来自Cloudfront CDN的Ace编辑器，就像它在样本页面上所说的那样，但它未能找到haml和stylus语法的荧光笔。

%script(src="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js")

大多数主题和语法高亮显示都有效，但这两个缺失：

GET http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/mode-stylus.js 403 (Forbidden) ace.js:1
GET http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/mode-haml.js 403 (Forbidden)

文件存在于构建仓库中。是否有更新的CDN，或者我是否必须自己托管？

Answer 1

我发现使用OP的CDN也会导致在事后加载不同语言的问题。这导致我使用与ACE的厨房水槽演示相同的来源：

// ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js

这可能很粗鲁，因为它有效地使用github作为CDN ......

我构建了一个很好的小jsfiddle来演示在初始编辑器构建之后以不同模式加载。

http://jsfiddle.net/KGhT4/

<style>
#editor {
    position: relative;
    height:400px;
    width: 400px
}
</style>
<select id="mode" size="1">
    <option value="ace/mode/abap">abap</option>
    <option value="ace/mode/actionscript">actionscript</option>
    <option value="ace/mode/ada">ada</option>
    <option value="ace/mode/asciidoc">asciidoc</option>
    <option value="ace/mode/assembly_x86">assembly_x86</option>
    <option value="ace/mode/autohotkey">autohotkey</option>
    <option value="ace/mode/batchfile">batchfile</option>
    <option value="ace/mode/c9search">c9search</option>
    <option value="ace/mode/c_cpp">c_cpp</option>
    <option value="ace/mode/clojure">clojure</option>
    <option value="ace/mode/cobol">cobol</option>
    <option value="ace/mode/coffee">coffee</option>
    <option value="ace/mode/coldfusion">coldfusion</option>
    <option value="ace/mode/csharp">csharp</option>
    <option value="ace/mode/css">css</option>
    <option value="ace/mode/curly">curly</option>
    <option value="ace/mode/d">d</option>
    <option value="ace/mode/dart">dart</option>
    <option value="ace/mode/diff">diff</option>
    <option value="ace/mode/django">django</option>
    <option value="ace/mode/dot">dot</option>
    <option value="ace/mode/ejs">ejs</option>
    <option value="ace/mode/erlang">erlang</option>
    <option value="ace/mode/forth">forth</option>
    <option value="ace/mode/ftl">ftl</option>
    <option value="ace/mode/glsl">glsl</option>
    <option value="ace/mode/golang">golang</option>
    <option value="ace/mode/groovy">groovy</option>
    <option value="ace/mode/haml">haml</option>
    <option value="ace/mode/handlebars">handlebars</option>
    <option value="ace/mode/haskell">haskell</option>
    <option value="ace/mode/haxe">haxe</option>
    <option value="ace/mode/html">html</option>
    <option value="ace/mode/html_ruby">html_ruby</option>
    <option value="ace/mode/ini">ini</option>
    <option value="ace/mode/jade">jade</option>
    <option value="ace/mode/java">java</option>
    <option value="ace/mode/javascript" selected>javascript</option>
    <option value="ace/mode/json">json</option>
    <option value="ace/mode/jsoniq">jsoniq</option>
    <option value="ace/mode/jsp">jsp</option>
    <option value="ace/mode/jsx">jsx</option>
    <option value="ace/mode/julia">julia</option>
    <option value="ace/mode/latex">latex</option>
    <option value="ace/mode/less">less</option>
    <option value="ace/mode/liquid">liquid</option>
    <option value="ace/mode/lisp">lisp</option>
    <option value="ace/mode/livescript">livescript</option>
    <option value="ace/mode/logiql">logiql</option>
    <option value="ace/mode/lsl">lsl</option>
    <option value="ace/mode/lua">lua</option>
    <option value="ace/mode/luapage">luapage</option>
    <option value="ace/mode/lucene">lucene</option>
    <option value="ace/mode/makefile">makefile</option>
    <option value="ace/mode/markdown">markdown</option>
    <option value="ace/mode/matlab">matlab</option>
    <option value="ace/mode/mushcode">mushcode</option>
    <option value="ace/mode/mushcode_high_rules">mushcode_high_rules</option>
    <option value="ace/mode/mysql">mysql</option>
    <option value="ace/mode/objectivec">objectivec</option>
    <option value="ace/mode/ocaml">ocaml</option>
    <option value="ace/mode/pascal">pascal</option>
    <option value="ace/mode/perl">perl</option>
    <option value="ace/mode/pgsql">pgsql</option>
    <option value="ace/mode/php">php</option>
    <option value="ace/mode/powershell">powershell</option>
    <option value="ace/mode/prolog">prolog</option>
    <option value="ace/mode/properties">properties</option>
    <option value="ace/mode/python">python</option>
    <option value="ace/mode/r">r</option>
    <option value="ace/mode/rdoc">rdoc</option>
    <option value="ace/mode/rhtml">rhtml</option>
    <option value="ace/mode/ruby">ruby</option>
    <option value="ace/mode/rust">rust</option>
    <option value="ace/mode/sass">sass</option>
    <option value="ace/mode/scad">scad</option>
    <option value="ace/mode/scala">scala</option>
    <option value="ace/mode/scheme">scheme</option>
    <option value="ace/mode/scss">scss</option>
    <option value="ace/mode/sh">sh</option>
    <option value="ace/mode/snippets">snippets</option>
    <option value="ace/mode/sql">sql</option>
    <option value="ace/mode/stylus">stylus</option>
    <option value="ace/mode/svg">svg</option>
    <option value="ace/mode/tcl">tcl</option>
    <option value="ace/mode/tex">tex</option>
    <option value="ace/mode/text">text</option>
    <option value="ace/mode/textile">textile</option>
    <option value="ace/mode/toml">toml</option>
    <option value="ace/mode/twig">twig</option>
    <option value="ace/mode/typescript">typescript</option>
    <option value="ace/mode/vbscript">vbscript</option>
    <option value="ace/mode/velocity">velocity</option>
    <option value="ace/mode/verilog">verilog</option>
    <option value="ace/mode/xml">xml</option>
    <option value="ace/mode/xquery">xquery</option>
    <option value="ace/mode/yaml">yaml</option>
</select>
<div id="editor">function foo(items) { 
  var x = "All this is syntax highlighted"; 
  return x;
}</div>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.getSession().setUseWorker(false);
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

    $('#mode').on('change', function (ev) {
        var mode = $('option:selected').attr('value');
        //console.log(mode)
        editor.getSession().setMode(mode);
    });
</script>

Answer 2

现在这个问题已经有一段时间了，但作为参考，根据官方网站，ace.js可以嵌入这两个地方：

参考：https://ace.c9.io/#nav=embedding

打包版本也可以从CDN上加载，例如jsDelivr或cdnjs

从CDN加载Ace Editor

2 个答案: