Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tuchk4/requirejs-codemirror
Load codemirror with needed modes and appending codemirror's css only when needed
https://github.com/tuchk4/requirejs-codemirror
Last synced: 21 days ago
JSON representation
Load codemirror with needed modes and appending codemirror's css only when needed
- Host: GitHub
- URL: https://github.com/tuchk4/requirejs-codemirror
- Owner: tuchk4
- Created: 2014-03-28T08:32:04.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-04-13T10:10:12.000Z (over 8 years ago)
- Last Synced: 2024-10-03T15:53:07.948Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 172 KB
- Stars: 14
- Watchers: 6
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Requirejs and CodeMirror
#### 1. Existing problem
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:
```javascript
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
```javascript
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
#### 2. RequireJS plugin for CodeMirror
Usage:
```javascript
// 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:
```javascript
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}'
}
}
});
```