load code mirror with requireJs

[deblockt]

Hello,

I use requireJs for load code mirror.
If requireJs is use code mirror don't create window.CodeMirror attribute.
To get codeMirror instance method require('codeMirror') must be used.
To correct this issue I have add this code line :

window.CodeMirror = require('codeMirror');

my require configuration :

require.config({
    paths : {
        codeMirrorAngular : 'angular-ui-codemirror/ui-codemirror',
        codeMirror : 'codemirror/lib/codemirror'
    },
    shim : {
        codeMirror : {
            deps : [],          
            exports: 'codeMirror'
        },
        codeMirrorAngular : {
            deps : ['codeMirror'],
            exports: 'codeMirrorAngular'
        }
    }
});

[cclusetti]

you could also just expose 'CodeMirror' in your shim.

[dmeehan1968]

Here is a sample config.

This assumes that your bower/node directory is 'lib', relative to your requires 'baseUrl'.

require.config({

  // useful for forcing dependency validation
  enforceDefine: true,

  // create path to angular-ui-codemirror
  paths: {
    'angular-ui-codemirror': 'lib/angular-ui-codemirror/ui-codemirror'
  },

  // correct way to load codemirror is via a package definition 
  // this allows codemirror to load its own modules via define
  packages: [
    {
      name: 'codemirror',
      location: 'lib/codemirror',  // relative to baseUrl
      main: 'lib/codemirror'        // relative to package location
    }
  ],

  shim: {

    // define how angular-ui-codemirror is loaded
    'angular-ui-codemirror': {

      // only angular is defined - you only need an exports if you are using requires enforceDefine option
      exports: 'angular',

      // requires both angular and codemirror to exist
      deps: [
        'angular',
        'codemirror',
      ],

      // after deps are loaded, codemirror is not a global, but angular-ui-codemirror expects
      // to see a global, so this function fixes that requirement.
      init: function(angular, codemirror) {
        window.CodeMirror = codemirror;
      }
    }
  }
});

// usage:

define([ 'angular-ui-codemirror' ], function( notDefined ) {

  // as you were...

});

[dave-k]

How would I add the coffeescript mode and use it with ui-codemirror ?

'./libs/codemirror/mode/coffeescript/coffeescript'

Here is my config:

`

require.config({
    paths: {
        'ui-codemirror' : './libs/angularUI/ui-codemirror',
        'ui-codemirror-merge' : './libs/angularUI/ui-codemirror-merge'
    },  

    packages: [{
        name: 'codemirror',
        location: './libs/codemirror/lib',   // relative to baseUrl
        main: 'codemirror'                        // relative to package location
    },{
        name: "diff_match_patch",
        location: "./libs/codemirror",
        main: "diff_match_patch"
    },{
        name: 'merge',
        location: './libs/codemirror/addon/merge',   // relative to baseUrl
        main: 'merge'                        // relative to package location
    }],


    shim: {    
        'ui-codemirror-merge' : {deps:["angular", "merge"]},
        'ui-codemirror' : {
            // only angular is defined - only need an exports if using requires enforceDefine option
            exports: 'angular',
            // requires both angular and codemirror to exist
            deps: [
                'angular',
                'codemirror'
            ],
            // after deps are loaded, codemirror is not a global, but ui-codemirror expects
            // to see a global, so this function fixes that requirement.
            init: function(angular, codemirror) {
                    window.CodeMirror = codemirror;
            }
        }
    }
});

`