Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading Ace Editor from CDN

I'm loading the Ace editor from the Cloudfront CDN like it says to on their sample page, but it's failing to find the haml and stylus syntax highlighters.

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

Most of the themes and syntax highlighters work, but these two are missing:

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) 

The files are present in the builds repo. Is there a more up to date CDN, or do I just have to host it myself?

like image 861
Daniel X Moore Avatar asked Jul 14 '13 06:07

Daniel X Moore


1 Answers

I found that using the OP's CDN also lead to problems loading different language in post facto. This lead me using the same source as ACE's kitchen sink demo:

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

which is perhaps rude, as it effectively uses github as a CDN...

I built a nice little jsfiddle to demonstrate loading in different modes after initial editor construction.

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>
like image 146
jonathan3692bf Avatar answered Oct 18 '22 05:10

jonathan3692bf