13

我正在从 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，还是我只需要自己托管？

4

2 回答 2

9

我发现使用 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>
于 2013-11-25T19:23:57.363 回答
6

根据官方网站ace.js 可以从公共 CDN 中嵌入，例如：

<script src="https://pagecdn.io/lib/ace/1.4.5/ace.js" integrity="sha256-5Xkhn3k/1rbXB+Q/DX/2RuAtaB4dRRyQvMs83prFjpM=" crossorigin="anonymous"></script>
于 2017-08-17T02:34:56.833 回答