1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>CodeMirror UI | Test Page</title>
<script src="http://svn.myroundcube.com/program/js/jquery.min.js" type="text/javascript"></script>
<script src="lib/CodeMirror-2.3/lib/codemirror.js" type="text/javascript"></script>
<script src="lib/CodeMirror-2.3/lib/util/searchcursor.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/lib/codemirror.css">
<script src="lib/CodeMirror-2.3/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/mode/javascript/javascript.css">
<script src="js/codemirror-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/codemirror-ui.css" type="text/css" media="screen" />
<style type="text/css">
body{
background:#0d4664;
text-align:center;
}
#pageBody{
width:930px;
padding:10px;
background:white;
text-align:left;
margin:10px auto;
padding-top:0px;
border:1px solid black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 3px 3px 14px #000;
-webkit-box-shadow: 3px 3px 14px #000;
box-shadow: 3px 3px 14px #000;
}
pre{
border:1px solid #ccc;
background:#eee;
padding:10px;
}
#footer{
font-size:0.9em;
color:white;
}
#footer a{
color:white;
}
</style>
</head>
<body>
<div id="pageBody">
<h1>CodeMirror UI</h1>
<p>
CodeMirrorUI is a simple interface written by Jeremy Green to act as a
wrapper around the <a href="http://codemirror.net/">CodeMirror</a> text editor widget by Marijn Haverbeke.
CodeMirror is a syntax highlighter and formatter that makes it much easier to edit source code in a browser.
ComeMirrorUI is a wrapper that adds interface functionality for many functions that are already built into CodeMirror itself.
Functionality includes undo, redo, jump to line, reindent selection, and reindent entire document.
Two options for find/replace are also available. It is based on the MirrorFrame example that Marijn included with CodeMirror.
</p>
<p>
This editor is enabled with the pop up find/replace widget.
</p>
<!--
<textarea id="code0" cols="120" rows="20">
// Line Numbers Here you see some JavaScript code. Mess around with it to get
// acquainted with CodeMirror's features.
// Press enter inside the object and your new line will be suitably
// indented.
var keyBindings = {
enter: "newline-and-indent",
tab: "reindent-selection",
ctrl_z: "undo",
ctrl_y: "redo",
ctrl_backspace: "undo-for-safari (which blocks ctrl-z)",
ctrl_bracket: "highlight-brackets",
ctrl_shift_bracket: "jump-to-matching-bracket"
};
// Press tab on the next line and the wrong indentation will be fixed.
var regex = /foo|bar/i;
function example(x) {
// Local variables get a different colour than global ones.
var y = 44.4;
return x + y - z;
}
</textarea>
-->
<textarea id="code1" cols="120" rows="20">
// Here you see some JavaScript code. Mess around with it to get
// acquainted with CodeMirror's features.
// Press enter inside the object and your new line will be suitably
// indented.
var keyBindings = {
enter: "newline-and-indent",
tab: "reindent-selection",
ctrl_z: "undo",
ctrl_y: "redo",
ctrl_backspace: "undo-for-safari (which blocks ctrl-z)",
ctrl_bracket: "highlight-brackets",
ctrl_shift_bracket: "jump-to-matching-bracket"
};
// Press tab on the next line and the wrong indentation will be fixed.
var regex = /foo|bar/i;
function example(x) {
// Local variables get a different colour than global ones.
var y = 44.4;
return x + y - z;
}
</textarea>
<h2>Easily Configurable</h2>
<p>
The editor above was created with code like this:
</p>
<pre>
//first set up some variables
var textarea = document.getElementById('code1');
var uiOptions = { path : 'js/', searchMode : 'popup' }
var codeMirrorOptions = { mode: "javascript" }
//then create the editor
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions); </pre>
<p>
Creating a new CodeMirrorUI is easy, you just call:
</p>
<pre>new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);</pre>
<h3>Params for new CodeMirrorUI()</h3>
<ul>
<li>
textarea - Either a DOM element of the ID of a DOM element that should be replaced with the editor UI.
</li>
<li>
uiOptions - Options for the CodeMirrorUI object.
<ul>
<li>
path - String - The path to the codemirror-ui js directory (relative to the current document).
</li>
<li>
searchMode - String - Options are 'inline' or 'popup'
</li>
<li>
buttons - Array - An array of button names that should be included in the button bar.
</li>
</ul>
</li>
<li>
codeMirrorOptions - Standard optiosn that you would pass to any CodeMirror constructor. See the <a href="http://codemirror.net/manual.html">CodeMirror manual</a> for more details;
</li>
</ul>
<h2>Installing</h2>
<p>
To install CodeMirrorUI you can just copy the codemirror-ui directory into your web app.
It includes a version of CodeMirror, or you can use your own version if you'd prefer.
</p>
<p>
Then include a link to the stylesheet and javascript files in your document. Something like this:
</p>
<pre class="code">
// First the CodeMirror stuff
<script src="lib/CodeMirror-2.3/lib/codemirror.js" type="text/javascript"></script>
<script src="lib/CodeMirror-2.3/lib/util/searchcursor.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/lib/codemirror.css">
<script src="lib/CodeMirror-2.3/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="lib/CodeMirror-2.3/mode/javascript/javascript.css">
//Then the CodeMirrorUI stuff
<script src="js/codemirror-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/codemirror-ui.css" type="text/css" media="screen" />
</pre>
<p>
<b>Note:</b> The find/replace functionality relies on the searchcursor add on.
</p>
<p>
From there you can create an editor as shown above. It is especially easy to replace any calls to
"CodeMirror.fromTextArea(...)" with a "new CodeMirrorUI(...)".
</p>
<h2>Another example</h2>
<p>
This editor is enabled with a save button and the 'inline' search widget.
You can pass a function as the 'saveCallback' option which will be called when the save button is clicked.
</p>
<p>
The button for the popup search widget has been removed,
along with the button for 'reindent selection'.
</p>
<textarea id="code2" cols="120" rows="30">
// Here you see some JavaScript code. Mess around with it to get
// acquainted with CodeMirror's features.
// Press enter inside the object and your new line will be suitably
// indented.
var keyBindings = {
enter: "newline-and-indent",
tab: "reindent-selection",
ctrl_z: "undo",
ctrl_y: "redo",
ctrl_backspace: "undo-for-safari (which blocks ctrl-z)",
ctrl_bracket: "highlight-brackets",
ctrl_shift_bracket: "jump-to-matching-bracket"
};
// Press tab on the next line and the wrong indentation will be fixed.
var regex = /foo|bar/i;
function example(x) {
// Local variables get a different colour than global ones.
var y = 44.4;
return x + y - z;
}
</textarea>
<p>
The uiOptions param for the editor above looks like this:
</p>
<pre class="code">
var uiOptions = {
path : 'js/',
searchMode = 'inline',
buttons : ['save','undo','redo','jump','reindent','about'],
saveCallback : function(){ alert("Some saving goes here. Probably AJAX or something fancy."); }
}
</pre>
<p>
View the source of this page to see the actual code used to get these editors in action.
</p>
<h2>Find the code @ Github</h2>
<a href="https://github.com/jagthedrummer/codemirror-ui">https://github.com/jagthedrummer/codemirror-ui</a>
<h2>Acknowledgements</h2>
<h3><a href="http://codemirror.net/">Marijn Haverbeke - CodeMirror</a></h3>
<p>
Thanks to Marijn Haverbeke for creating and releasing CodeMirror in the first place.
Whithout his excellent contribution to the community this project would have no reason to exist.
</p>
<h3><a href="http://www.famfamfam.com/lab/icons/silk/">Mark James - Silk Icons</a></h3>
<p>
I used the Silk icon set from Mark James of <a href="http://www.famfamfam.com/">famfamfam.com</a> fame.
</p>
<h2>Versions</h2>
<p>
All version up to and including 0.0.7 are based on CodeMirror 1.
</p>
<p>
Versions 0.0.8 and newer are based on CodeMirror 2.
</p>
<h2>License</h2>
<p>
CodeMirror UI is provided under the MIT License. See the LICENSE file for full details.
</p>
<h2>Known Usage</h2>
<p>
The following sites/apps are using CodeMirrorUI.
Please let me know if you'd like to be added to this list.
</p>
<ul>
<li><a href="http://www.webapeel.com/">aPeel</a></li>
</ul>
</div>
<div id="footer">
CodeMirrorUI is a production of <a href="http://www.octolabs.com/">OctoLabs</a>
<br/>
<a href="http://www.octolabs.com/"><img src="images/octologo.png" border="0"></a>
</div>
<script type="text/javascript">
/*
var textarea = document.getElementById('code0');
var myCodeMirror = CodeMirror.fromTextArea(textarea, {mode: "javascript", lineNumbers: true,} );
*/
var textarea = document.getElementById('code1');
var editor = new CodeMirrorUI(textarea,
{
path : 'js/',
searchMode : 'popup'
},
{
mode: "javascript"
});
var textarea2 = document.getElementById('code2');
//CodeMirror.replace(textarea);
var editor2 = new CodeMirrorUI(textarea2,
{
path : 'js/',
searchMode : 'inline',
buttons : ['save','undo','redo','jump','reindent','about'],
saveCallback : function(){ alert("Some saving goes here. Probably AJAX or something fancy."); }
},
{
mode: "php"
});
</script>
</body>
</html>
|
