Skip to content

Commit 815c8aa

Browse files
author
Philipp
committed
README.md + Demo ready, 1.0.0
1 parent c06d7b6 commit 815c8aa

File tree

3 files changed

+97
-32
lines changed

3 files changed

+97
-32
lines changed

‎README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
### Install
2+
3+
`bower install philsweb.jquery-codemirror --save`
4+
5+
### Usage
6+
7+
##### Initialize
8+
9+
`options` can be `null` or contain original CodeMirror settings
10+
11+
```
12+
$(...).codemirrorInit(options);
13+
```
14+
15+
`defaults` are:
16+
17+
```
18+
mode: "text/html",
19+
lineNumbers: true,
20+
lineWrapping: true
21+
```
22+
23+
`NB!` Do not forget to add required mode `mode/xml/xml.js`
24+
25+
You can set configs in DOM element attribute `codemirror-config`
26+
27+
```
28+
<div codemirror-config='{"autofocus": true, "value": "Hello world"}'></div>
29+
```
30+
31+
##### CodeMirror methods
32+
33+
CodeMirror object is initialized and saved for each element via `$.data(element, 'codemirror)`
34+
35+
You can access it and use as specified in CodeMirror manual
36+
37+
```
38+
$.data($(...)][0], 'codemirror).getValue()
39+
```
40+
41+
Plugin itself adds `setValue(string), getValue(), setOption(option, value), setOptions(optionsObject)`
42+
43+
```
44+
$(...).codemirror().getValue()
45+
```

‎index.html‎

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,71 @@
1-
<script src="bower_components/jquery/dist/jquery.min.js"></script>
1+
<head>
2+
<script src="bower_components/jquery/dist/jquery.min.js"></script>
23

3-
<script src="bower_components/codemirror/lib/codemirror.js"></script>
4-
<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
5-
<script src="bower_components/codemirror/mode/xml/xml.js"></script>
4+
<script src="bower_components/codemirror/lib/codemirror.js"></script>
5+
<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
6+
<script src="bower_components/codemirror/mode/xml/xml.js"></script>
67

7-
<script src="philsweb.jquery.codemirror.js"></script>
8+
<script src="philsweb.jquery.codemirror.js"></script>
9+
<link rel="stylesheet" href="philsweb.codemirror.css">
810

9-
TODO: create demo, write README, minify
11+
<style>
12+
.code-snippet-group-1 {
13+
margin: 10px;
14+
width: 250px;
15+
height: 250px;
16+
border: 1px solid black;
17+
display: inline-block;
18+
}
1019

11-
<div class="margin10 code-snippet" data-test style="width:250px;height:300px;border:1px solid black;"></div>
20+
.code-snippet-group-2 {
21+
margin: 10px;
22+
width: 802px;
23+
height: 250px;
24+
border: 1px solid black;
25+
}
26+
</style>
27+
</head>
1228

13-
<div class="margin10 code-snippet" codemirror-config='{"showCursorWhenSelecting": true, "readOnly": true, "value": "Hello world"}'
14-
style="width:350px;height:150px;border:1px solid black;"></div>
29+
<body>
1530

16-
<div class="margin10 code-snippet" data-no-lines style="width:500px;height:100px;border:1px solid black;"></div>
31+
<h3>'philsweb.jquery-codemirror' Demo</h3>
1732

18-
<style>
19-
.margin10 {
20-
margin: 10px;
21-
}
33+
<div class="code-snippet-group-1" first></div>
2234

23-
.CodeMirror {
24-
height: inherit;
25-
}
26-
</style>
35+
<div class="code-snippet-group-1" second
36+
codemirror-config='{"cursorHeight": ".5", "autofocus": true, "value": " Hello world"}'></div>
2737

28-
<script>
29-
$(function () {
30-
31-
$('.code-snippet').codemirrorInit({readOnly: "nocursor"});
38+
<div class="code-snippet-group-1" third></div>
3239

33-
$('.code-snippet[data-test]').codemirror().setValue('Any string');
40+
<div class="code-snippet-group-2" codemirror-config='{"firstLineNumber": -5}'></div>
3441

35-
console.log($('.code-snippet[data-test]').codemirror().getValue());
42+
</body>
3643

37-
var elements = $('.code-snippet');
44+
<script>
45+
$(function () {
3846

39-
var increment = 1;
47+
$('.code-snippet-group-1').codemirrorInit();
4048

41-
elements.each(function (key, element) {
49+
// codemirror() returns setValue(string), getValue(), setOption(option, value), setOptions(optionsObject)
50+
console.log($('.code-snippet-group-1[second]').codemirror().getValue());
4251

43-
$.data(element, 'codemirror').setValue('Any' + increment++);
44-
$(element).codemirror().setValue('New' + increment++);
52+
// Original CodeMirror object can be accessed by $.data(element, 'codemirror')
53+
console.log($.data($('.code-snippet-group-1[second]')[0], 'codemirror').getValue());
4554

55+
// Iterate elements
56+
$('.code-snippet-group-1').each(function (key, element) {
57+
if (element !== $('.code-snippet-group-1[second]')[0]) {
58+
$(element).codemirror().setValue('Any string');
59+
var value = $(element).codemirror().getValue();
60+
$.data(element, 'codemirror').setValue(value + ' here');
61+
}
4662
});
4763

48-
$('.code-snippet[data-no-lines]').codemirror().setOption('lineNumbers', false);
64+
$('.code-snippet-group-1[first]').codemirror().setOption('lineNumbers', false);
65+
66+
$('.code-snippet-group-1[third]').codemirror().setOptions({readOnly: true, firstLineNumber: 3});
4967

50-
$('.code-snippet[data-no-lines]').codemirror().setOptions({lineNumbers: true, readOnly: true});
5168

52-
$.data($('.code-snippet[data-no-lines]')[0], 'codemirror').focus();
69+
$('.code-snippet-group-2').codemirrorInit({value: "<div> Hello world </div>"});
5370
});
5471
</script>

‎philsweb.codemirror.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.CodeMirror {
2+
height: inherit;
3+
}

0 commit comments

Comments
 (0)