Search code examples
javascriptrequirejsace-editor

How to load ace editor with requirejs from CDN?


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
})

Solution

  • 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>