When you need to use CodeMirror:
- you need to load codemirror
- you need to append codemirror's css file
- you need to load needed codemirror's modes
This is not hard to set path to CodeMirror lib at requriejs.config :) And you will be able to load it with:
require('code-mirror');
And all will be ok. But you also need to append CSS file (and this CSS should be only at pages where codemirror is using). This is also not a big problem. A lot of ways how it could be appened.
But main problem - in loading CodeMirror modes.
http://codemirror.net/2/demo/loadmode.html
Default application structure:
|-app/
| |
| |-src/
| |-boot.js
|
|-bower_components/
- app/ - directory with application scripts
- boot.js - config for require js (entry point).
- bower_components/ - directory with downloaded bower components xD
In boot.js set baseUrl key in config that value is usually set to app/ directory. So if you want to require bower_component in boot.js file you neeed to set path to upper directory
require('../bower_components/module/module-script');
And you can not set paths to CodeMirror modes at requirejs.config because:
CodeMirror check if requriejs is used, and if so - CodeMirror will use it. And If you descrive path to CodeMirror's mode at requriejs.config - require function inside modes scitpts will have relative path from boot.js and it will be able to load other dependencies because paths will be wrong.
And it will be not beautiful to require bower_components inside scripts when you should write full path to component. And this path should be relative from current script. Something like ../../../../bower_components/... that is not beautiful :)
And same problem with CodeMirror.autoLoadMode
Usage:
// will require CodeMirror and inlcude CSS file
var CodeMirror = require('code-mirror!@');
// will require CodeMirror, inlcude CSS file and load htmlmixed mode
var CodeMirror = require('code-mirror!htmlmixed');
// will require CodeMirror, inlcude CSS file and load htmlmixed and php modes
var CodeMirror = require('code-mirror!htmlmixed|php');
// will require CodeMirror, inlcude CSS file and load htmlmixed and php modes
// and ambiance, eclipse and monokai themes.
var CodeMirror = require('code-mirror!htmlmixed|php:ambiance|eclipse|monokai');
And plugin should be configured at requirejs.conf:
requirejs.config({
cm: {
// baseUrl to CodeMirror dir
baseUrl: '../bower_components/CodeMirror/',
// path to CodeMirror lib
path: 'lib/codemirror',
// path to CodeMirror css file
css: '/path/to/code-mirror/css/file',
// define themes
themes: {
monokai: '/path/to/theme/monokai.css',
ambiance: '/path/to/theme/ambiance.css',
eclipse: '/path/to/theme/eclipse.css'
},
modes: {
// modes dir structure
path: 'mode/{mode}/{mode}'
}
}
});