2013-07-14 19 views
8

Sto caricando l'editor Ace dal CDN di Cloudfront come si dice nella loro pagina di esempio, ma non riesce a trovare gli evidenziatori di sintassi haml e stilo.Caricamento di Ace Editor da CDN

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

maggior parte dei temi ed evidenziatori sintassi di lavoro, ma questi due sono mancanti:

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) 

I file sono presenti nel repository costruisce. C'è un CDN più aggiornato, o devo solo ospitarlo da solo?

risposta

6

Ho scoperto che l'utilizzo del CDN dell'OP porta anche a problemi di caricamento di lingue diverse in post-produzione. Questo mi ha portato utilizzando la stessa sorgente di ACE lavello della cucina demo:

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

che forse è maleducato, come in modo efficace usa github come CDN ...

Ho costruito un bel jsfiddle piccolo per dimostrare il caricamento in diverse modalità dopo la costruzione dell'editor iniziale.

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> 
+0

Un ulteriore problema con l'utilizzo di github come CDN è che HTTPS non è supportato. –

+0

Word. Sto ancora cercando la soluzione HTTPS per questo problema. –

+0

HTTPS funziona con questo esempio, prova https://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js; Questa è la soluzione migliore che ho trovato a questo problema – Vincent

Problemi correlati