TechQA.

How to load ace editor with requirejs from CDN?

2.1k views Asked by arthur.sw At 17 June 2015 at 09:53

I am trying to load the ace editor from a CDN with requirejs.

Here is a plunkr which illustrates my problem. Ace is not defined in the following case:

requirejs.config({
  paths: { ace: ['//cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace'] }
})

$('h1').text("loading ace...");
requirejs([ 'ace'], function(ace) {
  $('h1').text("ace loaded.")
  console.log(ace)
  ace.edit('#editor')
  return
})

There are 1 answers

a user

a user On 17 June 2015 at 18:49 BEST ANSWER

you need to define ace as a path to the folder that contains ace.js and require "ace/ace"

requirejs.config({
    paths: { ace: ['//cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/'] }
})

$('h1').text("loading ace...");
requirejs(['ace/ace'], function(ace) {
    $('h1').text("ace loaded.")
    console.log(ace)
    ace.edit('editor')
})

<!DOCTYPE html>
<html>

  <head>
    <script src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>    
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id='editor' style="height:200px"></div>
  </body>

</html>