liquid_cms 0.2.0.11 → 0.2.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. data/CHANGELOG.rdoc +7 -0
  2. data/TODO.rdoc +1 -1
  3. data/app/controllers/cms/main_controller.rb +3 -2
  4. data/app/helpers/cms/common_helper.rb +9 -2
  5. data/app/helpers/cms/components_helper.rb +10 -4
  6. data/app/models/cms/component.rb +4 -0
  7. data/app/views/cms/assets/_list.html.erb +4 -4
  8. data/app/views/cms/components/_list.html.erb +5 -1
  9. data/app/views/cms/pages/_list.html.erb +4 -4
  10. data/app/views/cms/shared/_sidebar.html.erb +32 -8
  11. data/app/views/layouts/cms.html.erb +5 -2
  12. data/generators/liquid_cms/templates/config/locales/cms/en.yml +3 -2
  13. data/generators/liquid_cms/templates/public/cms/codemirror/LICENSE +0 -0
  14. data/generators/liquid_cms/templates/public/cms/codemirror/css/csscolors.css +0 -0
  15. data/generators/liquid_cms/templates/public/cms/codemirror/css/docs.css +17 -3
  16. data/generators/liquid_cms/templates/public/cms/codemirror/css/font.js +15 -0
  17. data/generators/liquid_cms/templates/public/cms/codemirror/css/jscolors.css +0 -0
  18. data/generators/liquid_cms/templates/public/cms/codemirror/css/sparqlcolors.css +0 -0
  19. data/generators/liquid_cms/templates/public/cms/codemirror/css/xmlcolors.css +0 -0
  20. data/generators/liquid_cms/templates/public/cms/codemirror/js/codemirror.js +59 -26
  21. data/generators/liquid_cms/templates/public/cms/codemirror/js/editor.js +149 -71
  22. data/generators/liquid_cms/templates/public/cms/codemirror/js/highlight.js +2 -2
  23. data/generators/liquid_cms/templates/public/cms/codemirror/js/mirrorframe.js +2 -2
  24. data/generators/liquid_cms/templates/public/cms/codemirror/js/parsecss.js +5 -3
  25. data/generators/liquid_cms/templates/public/cms/codemirror/js/parsedummy.js +0 -0
  26. data/generators/liquid_cms/templates/public/cms/codemirror/js/parsehtmlmixed.js +28 -9
  27. data/generators/liquid_cms/templates/public/cms/codemirror/js/parsejavascript.js +0 -0
  28. data/generators/liquid_cms/templates/public/cms/codemirror/js/parsesparql.js +0 -0
  29. data/generators/liquid_cms/templates/public/cms/codemirror/js/parsexml.js +6 -1
  30. data/generators/liquid_cms/templates/public/cms/codemirror/js/select.js +48 -21
  31. data/generators/liquid_cms/templates/public/cms/codemirror/js/stringstream.js +15 -1
  32. data/generators/liquid_cms/templates/public/cms/codemirror/js/tokenize.js +0 -0
  33. data/generators/liquid_cms/templates/public/cms/codemirror/js/tokenizejavascript.js +1 -1
  34. data/generators/liquid_cms/templates/public/cms/codemirror/js/undo.js +17 -14
  35. data/generators/liquid_cms/templates/public/cms/codemirror/js/unittests.js +44 -0
  36. data/generators/liquid_cms/templates/public/cms/codemirror/js/util.js +6 -3
  37. data/generators/liquid_cms/templates/public/cms/javascripts/cms.js +15 -1
  38. data/generators/liquid_cms/templates/public/cms/javascripts/livepipe.js +181 -0
  39. data/generators/liquid_cms/templates/public/cms/javascripts/tabs.js +149 -0
  40. data/generators/liquid_cms/templates/public/cms/stylesheets/ie9.css +4 -0
  41. data/generators/liquid_cms/templates/public/cms/stylesheets/sidebar.css +132 -0
  42. data/generators/liquid_cms/templates/public/cms/stylesheets/styles.css +1 -74
  43. data/generators/liquid_cms/templates/public/cms/stylesheets/themes/dark.css +2 -1
  44. data/lib/liquid_cms/context.rb +4 -0
  45. data/lib/liquid_cms/version.rb +1 -1
  46. data/liquid_cms.gemspec +1 -1
  47. data/test/functional/assets_controller_test.rb +3 -3
  48. data/test/rails_app/config/locales/cms/en.yml +8 -0
  49. metadata +11 -16
  50. data/generators/liquid_cms/templates/public/cms/codemirror/bigtest.html +0 -1296
  51. data/generators/liquid_cms/templates/public/cms/codemirror/css/people.jpg +0 -0
  52. data/generators/liquid_cms/templates/public/cms/codemirror/csstest.html +0 -60
  53. data/generators/liquid_cms/templates/public/cms/codemirror/highlight.html +0 -82
  54. data/generators/liquid_cms/templates/public/cms/codemirror/htmltest.html +0 -52
  55. data/generators/liquid_cms/templates/public/cms/codemirror/index.html +0 -245
  56. data/generators/liquid_cms/templates/public/cms/codemirror/jstest.html +0 -56
  57. data/generators/liquid_cms/templates/public/cms/codemirror/manual.html +0 -759
  58. data/generators/liquid_cms/templates/public/cms/codemirror/mixedtest.html +0 -52
  59. data/generators/liquid_cms/templates/public/cms/codemirror/sparqltest.html +0 -41
  60. data/generators/liquid_cms/templates/public/cms/codemirror/story.html +0 -671
@@ -1,759 +0,0 @@
1
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
- <html>
3
- <head>
4
- <title>CodeMirror: User Manual</title>
5
- <link rel="stylesheet" type="text/css" href="css/docs.css"/>
6
- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Droid+Sans:bold"/>
7
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8
- </head>
9
- <body>
10
-
11
- <h1><span class="logo-braces">{ }</span> CodeMirror</h1>
12
-
13
- <pre class="grey">
14
- /* User manual and
15
- reference guide */
16
- </pre>
17
-
18
- <div class="clear"><div class="leftbig blk">
19
-
20
- <h2 id="usage">Basic Usage</h2>
21
-
22
- <p>Inside the editor, the tab key is used to re-indent the current
23
- selection (or the current line when nothing is selected), and
24
- pressing enter will, apart from inserting a line break,
25
- automatically indent the new line. Pressing control-enter will
26
- cause the whole buffer to be re-coloured, which can be helpful
27
- when some colouring has become out-of-date without the editor
28
- noticing it.</p>
29
-
30
- <p>The editor sports an undo/redo system, accessible with
31
- control-z (undo) and control-y (redo). Safari will not allow
32
- client scripts to capture control-z presses, but you can use
33
- control-backspace instead on that browser.</p>
34
-
35
- <p>The key-combination control-[ triggers a paren-blink: If the
36
- cursor is directly after a '(', ')', '[', ']', '{', or '}', the
37
- editor looks for the matching character, and highlights these
38
- characters for a moment. There is an option to enable this to
39
- happen any time the user types something or moves the cursor.</p>
40
-
41
- <p>To use CodeMirror in a document, you should add a script tag to
42
- load <a href="js/codemirror.js"><code>codemirror.js</code></a>. This
43
- adds two objects to your environment, <code>CodeMirror</code> and
44
- <code>CodeMirrorConfig</code>. The first is the interface to the
45
- editor, the second can be used to configure it. (Note that this is
46
- the only name-space pollution you can expect from CodeMirror --
47
- all other cruft is kept inside the IFRAMEs that it creates when
48
- you open an editor.)</p>
49
-
50
- <p>To add an editor to a document, you must choose a place, a
51
- parser, and a style-sheet for it. For example, to append an
52
- XML editor to the body of the document, you do:</p>
53
-
54
- <pre class="code">var editor = new CodeMirror(document.body, {
55
- parserfile: "parsexml.js",
56
- stylesheet: "xmlcolors.css"
57
- });</pre>
58
-
59
- <p>The first argument to the <code>CodeMirror</code> constructor
60
- can be a DOM node, in which case the editor gets appended to that
61
- node, or a function, which will be called with the IFRAME node as
62
- argument, and which is expected to place that node somewhere in
63
- the document.</p>
64
-
65
- <p>The second (optional) argument is an object that specifies
66
- options. A set of default options (see below) is present in the
67
- <code>CodeMirrorConfig</code> object, but each instance of the
68
- editor can be given a set of specific options to override these
69
- defaults. In this case, we specified that the parser should be
70
- loaded from the <a
71
- href="js/parsexml.js"><code>"parsexml.js"</code></a> file, and
72
- that <a href="css/xmlcolors.css"><code>"xmlcolors.css"</code></a>
73
- should be used to specify the colours of the code.</p>
74
-
75
- <p>Another example:</p>
76
-
77
- <pre class="code">var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
78
- parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
79
- path: "lib/codemirror/js/",
80
- stylesheet: "lib/codemirror/css/jscolors.css",
81
- content: document.getElementById("inputfield").value
82
- });</pre>
83
-
84
- <p>Here we use the utility function
85
- <code>CodeMirror.replace</code> to create a function that will
86
- replace a node in the current document (given either directly or
87
- by ID) with the editor. We also select the JavaScript parser this
88
- time, and give a <code>path</code> option to tell the editor that
89
- its files are not located in the same directory as the current
90
- HTML page, but in <code>"lib/codemirror/"</code>.</p>
91
-
92
- <p>There is a function
93
- <code>CodeMirror.isProbablySupported()</code> that causes some
94
- 1998-style browser detection to happen, returning
95
- <code>false</code> if CodeMirror is probably not supported on the
96
- browser, <code>true</code> if it probably is, and
97
- <code>null</code> if it has no idea. As the name suggests, this is
98
- not something you can rely on, but it's usually better than
99
- nothing.</p>
100
-
101
- <p>Another utility function, <code>CodeMirror.fromTextArea</code>,
102
- will, given a textarea node or the id of such a node, hide the
103
- textarea and replace it with a CodeMirror frame. If the textarea
104
- was part of a form, an <code>onsubmit</code> handler will be
105
- registered with this form, which will load the content of the
106
- editor into the textarea, so that it can be submitted as normal.
107
- This function optionally takes a configuration object as second
108
- argument.</p>
109
-
110
- <pre class="code">var editor = CodeMirror.fromTextArea("inputfield", {
111
- parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
112
- path: "lib/codemirror/js/",
113
- stylesheet: "lib/codemirror/css/jscolors.css"
114
- });</pre>
115
-
116
- <p>Instances created like this will have a
117
- <code>toTextArea()</code> method which removes them and restores
118
- the text area they were based on.</p>
119
-
120
- <p>The reason that the script path has to be configured is that
121
- CodeMirror will load in a bunch of extra files when an editor is
122
- created (the parser script, among others). To be able to do this,
123
- it has to know where to find them. These are all the JavaScript
124
- files that are part of CodeMirror itself:</p>
125
-
126
- <dl>
127
- <dt><a href="js/codemirror.js"><code>codemirror.js</code></a></dt>
128
- <dd>Main interface, takes care of default configuration and the
129
- definition of editor frames. Include this in your HTML
130
- document.</dd>
131
- <dt><a href="js/editor.js"><code>editor.js</code></a></dt> <dd>The
132
- code that takes care of reacting to user input, colouring text,
133
- and indenting lines.</dd>
134
- <dt><a href="js/util.js"><code>util.js</code></a></dt> <dd>A few
135
- generic utility functions.</dd>
136
- <dt><a
137
- href="js/undo.js"><code>undo.js</code></a></dt>
138
- <dd>Implements the undo history for the editor.</dd>
139
- <dt><a
140
- href="js/stringstream.js"><code>stringstream.js</code></a></dt>
141
- <dd>Objects for wrapping the textual input to the parser.</dd>
142
- <dt><a href="js/select.js"><code>select.js</code></a></dt> <dd>Some
143
- helper utilities for working with selected text and cursor
144
- positions.</dd>
145
- <dt><a href="js/tokenize.js"><code>tokenize.js</code></a></dt>
146
- <dd>Helper framework for writing tokenisers.</dd>
147
- </dl>
148
-
149
- <p>Most of these are rather full of comments, which can be useful
150
- when you are trying to figure out how they work, but wastes a lot
151
- of bandwidth in a production system. Take a look at the
152
- description of the <code>basefiles</code> option below if you want
153
- to concatenate and minimise the library (see the <a href="compress.html">compression API</a>).</p>
154
-
155
- <p>Apart from these, there are files that implement the various
156
- parsers. These all start with either <code>parse</code> or
157
- <code>tokenize</code>.</p>
158
-
159
- <h2 id="configuration">Configuration</h2>
160
-
161
- <p>There are three ways to configure CodeMirror:</p>
162
-
163
- <ul>
164
- <li>If you define a global <code>CodeMirrorConfig</code> object
165
- before loading <a
166
- href="js/codemirror.js"><code>codemirror.js</code></a>, the
167
- configuration options in that object will override the
168
- defaults.</li>
169
- <li>By assigning to the properties of the
170
- <code>CodeMirrorConfig</code> object, configuration defaults can
171
- be overridden after loading <a
172
- href="js/codemirror.js"><code>codemirror.js</code></a>.</li>
173
- <li>The <code>CodeMirror</code> constructor can be given a second
174
- argument, an object, which will override some options for just
175
- that editor. Options not mentioned in this object will default to
176
- the values in the <code>CodeMirrorConfig</code> object.</li>
177
- </ul>
178
-
179
- <p>The options that can be specified are these (most have sensible
180
- defaults specified in <a
181
- href="js/codemirror.js"><code>codemirror.js</code></a>):</p>
182
-
183
- <dl>
184
-
185
- <dt><code>stylesheet</code></dt><dd>The file name of the
186
- style-sheet, or style-sheets, that should be used to colour the
187
- code in the editor frame. Can be a string or an array of
188
- strings. See <a
189
- href="css/jscolors.css"><code>jscolors.css</code></a> for an
190
- example. The set of active stylesheets can be changed in a
191
- running editor with the <code>setStylesheet</code> method, which
192
- also takes a string or array of strings as argument.</dd>
193
-
194
- <dt><code>path</code></dt><dd>The path that is prefixed to
195
- script file names when they are loaded into an IFRAME. (Note that
196
- this is not applied to the style-sheet file name.)</dd>
197
-
198
- <dt><code>parserfile</code></dt><dd>A file name string, or an
199
- array of strings that name the files containing the parser. See
200
- below for the interface that such a parser should
201
- implement.</dd>
202
-
203
- <dt><code>basefiles</code></dt><dd>An array of strings naming
204
- the files containing the base CodeMirror functionality. Defaults
205
- to <code>["util.js", "stringstream.js", "select.js", "undo.js",
206
- "editor.js", "tokenize.js"]</code>, but if you put them all into
207
- a single file to reduce latency, or add some functionality, you
208
- might have to adjust that.</dd>
209
-
210
- <dt><code>iframeClass</code></dt><dd>Set this to a string to
211
- give the IFRAME node created for the editor a custom CSS class.
212
- Defaults to <code>null</code>.</dd>
213
-
214
- <dt><code>passDelay</code></dt><dd>Gives the amount of
215
- milliseconds between colouring passes. Defaults to 200.</dd>
216
-
217
- <dt><code>passTime</code></dt><dd>Specifies the maximum amount
218
- of time that the highlighter will spend in one shot. Setting
219
- this too high will cause the editor to 'freeze' the browser for
220
- noticeable intervals. Defaults to 50.</dd>
221
-
222
- <dt><code>continuousScanning</code></dt><dd>Configure continuous
223
- scanning of the document. When <code>false</code>, scanning is
224
- disabled. When set to a number, say <code>N</code>, a
225
- 'background' process will scan the document for
226
- <code>passTime</code> (see above) milliseconds every
227
- <code>N</code> milliseconds, regardless of whether anything
228
- changed. This makes sure non-local changes propagate through the
229
- document, and will help keep everything consistent. It does add
230
- extra processing cost, even for an idle editor. Default value is
231
- <code>false</code>.</dd>
232
-
233
- <dt><code>autoMatchParens</code></dt><dd>When <code>true</code>,
234
- will cause parens to be matched every time a key is pressed or
235
- the user clicks on the document. Defaults to <code>false</code>.
236
- Might be expensive for big documents.</dd>
237
-
238
- <dt><code>markParen</code>,
239
- <code>unmarkParen</code></dt><dd>Functions. Can be used to
240
- customise the way brackets are marked (and unmarked) when
241
- matched. Both take the bracket's <code>SPAN</code> node as their
242
- first argument, and <code>markParen</code> takes a second
243
- boolean argument indicating whether a successful match was
244
- found. The default is to make the brackets bold and green (or
245
- red, if not matched).</dd>
246
-
247
- <dt><code>saveFunction</code></dt><dd>If given a function
248
- value, that function will be invoked when the user presses
249
- control-s. You should advise your Opera users to use
250
- control-shift-s instead, since plain control-s will bring up the
251
- 'save page' dialog. Defaults to <code>null</code>.</dd>
252
-
253
- <dt><code>undoDepth</code></dt><dd>Maximum length of the undo
254
- history. Default is 50. This setting is changeable with the
255
- <code>setUndoDepth(depth)</code> method on CodeMirror
256
- instances.</dd>
257
-
258
- <dt><code>onChange</code></dt><dd>An optional function of zero
259
- arguments that gets called whenever the document is changed.
260
- Happens at undo-commit time, not instantaniously.</dd>
261
-
262
- <dt><code>undoDelay</code></dt><dd>When nothing is done in the
263
- editor for this amount of milliseconds, pending changes get
264
- added to the undo history. Setting this lower will give the undo
265
- functionality a finer granularity. Defaults to 800.</dd>
266
-
267
- <dt><code>width</code>, <code>height</code></dt><dd>The size of
268
- the editor frame, given as a style-sheet quantities (for example
269
- <code>"600px"</code> or <code>"100%"</code>). When
270
- <code>height</code> is set to <code>dynamic</code>, the editor
271
- will automatically resize to fit its contents. In this case, the
272
- <code>minHeight</code> option (an integer) is used to determine
273
- the minimum height in pixels.</dd>
274
-
275
- <dt><code>disableSpellcheck</code></dt><dd>Should the editor
276
- disable spell-checking on browsers that support it (Firefox 2+).
277
- Default is <code>true</code>, since for most code spell-checking
278
- is useless. Can be changed with the
279
- <code>setSpellCheck(on)</code> method.</dd>
280
-
281
- <dt><code>textWrapping</code></dt><dd>Can be used to disable or
282
- enable text-wrapping in the editor frame. Default is
283
- <code>true</code>. Changeable with the
284
- <code>setTextWrapping(on)</code> method.</dd>
285
-
286
- <dt><code>lineNumbers</code></dt><dd>Show line numbers to the
287
- left of the editor. This requires you to specify a style for the
288
- <code>CodeMirror-line-numbers</code> CSS class (in the outer
289
- document) to configure the width, font, colors, etcetera for the
290
- line-number DIV. You have to make sure that lines in the
291
- numbering element have the same height as lines in the editor.
292
- This is most easily done by giving them both the same font and
293
- an absolute ('pt' or 'px') font size. This option defaults to
294
- <code>false</code>. Changeable with the
295
- <code>setLineNumbers(on)</code> method.</dd>
296
-
297
- <dt><code>firstLineNumber</code></dt><dd>When
298
- <code>lineNumbers</code> is enabled, this determines the number
299
- given to the first line. Defualt is <code>1</code>.</dd>
300
-
301
- <dt><code>lineNumberDelay</code>,
302
- <code>lineNumberTime</code></dt><dd>When both line numbers are
303
- and text wrapping are turned on, updating line numbers can be
304
- expensive. These settings can be used to control how fast the
305
- updating happens &#x2015; they work in the same way as
306
- <code>passDelay</code> and <code>passTime</code>.</dd>
307
-
308
- <dt><code>indentUnit</code></dt><dd>An integer that specifies
309
- the amount of spaces one 'level' of indentation should add.
310
- Default is <code>2</code>. Changeable in a running editor using
311
- the <code>setIndentUnit(spaces)</code> method.</dd>
312
-
313
- <dt><code>tabMode</code></dt><dd>Determines what the effect of
314
- pressing tab is. Possibilities are:
315
- <dl>
316
- <dt><code>"indent"</code></dt><dd>The default. Causes tab to
317
- adjust the indentation of the selection or current line using
318
- the parser's rules.</dd>
319
- <dt><code>"spaces"</code></dt><dd>Pressing tab simply inserts
320
- four spaces.</dd>
321
- <dt><code>"default"</code></dt><dd>CodeMirror does not
322
- interfere with the tab key, but leaves it to the browser to
323
- handle it. Binds shift-space to regular indentation
324
- behaviour.</dd>
325
- <dt><code>"shift"</code></dt><dd>Pressing tab indents the
326
- current line (or selection) one <code>indentUnit</code>
327
- deeper, pressing shift-tab, un-indents it.</dd>
328
- </dl>
329
- This option can be changed at run-time using the
330
- <code>setTabMode(mode)</code> method.</dd>
331
-
332
- <dt><code>enterMode</code></dt><dd>Determines how a new line
333
- created by pressing enter is indented. Supported modes are:
334
- <dl>
335
- <dt><code>"indent"</code></dt><dd>The default. Causes the new
336
- line to be intented by the rules of the parser.</dd>
337
- <dt><code>"keep"</code></dt><dd>Keeps the indentation of the
338
- previous line.</dd>
339
- <dt><code>"flat"</code></dt><dd>Never indents new lines.</dd>
340
- </dl>
341
- The <code>setEnterMode</code> method can be used to change this
342
- option in a running editor.</dd>
343
-
344
- <dt><code>electricChars</code></dt><dd>A boolean that can be
345
- used to turn "electric chars" (characters that cause the current
346
- line to be reindented when typed, such as <code>{</code> and
347
- <code>}</code> in C-like languages) on and off. Default is
348
- on.</dd>
349
-
350
- <dt><code>reindentOnLoad</code></dt><dd>When <code>true</code>,
351
- this causes the content of the editor to be reindented
352
- immediately when the editor loads. Defaults to
353
- <code>false</code>.</dd>
354
-
355
- <dt><code>readOnly</code></dt><dd>When set to <code>true</code>,
356
- the document is not editable.</dd>
357
-
358
- <dt><code>domain</code></dt><dd>Can be set to the value
359
- <code>document.domain</code> should have inside of the iframe.
360
- Used to prevent access issues in IE, where this value isn't
361
- automatically inherited by iframes.</dd>
362
-
363
- <dt><code>initCallback</code></dt><dd>If set to a function, this
364
- will be called (with the editor object as its argument) after
365
- the editor has finished initialising.</dd>
366
-
367
- <dt><code>cursorActivity</code></dt><dd>A function that is
368
- called every time the cursor moves, with the top-level node that
369
- the cursor is inside or next to as an argument. Can be used to
370
- have some controls react to the context of the cursor.</dd>
371
-
372
- <dt><code>activeTokens</code></dt><dd>Can be set to a function
373
- that will be called with <code>(spanNode, tokenObject,
374
- editor)</code> arguments whenever a new token node is being
375
- added to the document. Can be used to do things like add event
376
- handlers to nodes. Should <em>not</em> change the DOM structure
377
- of the node (so no turning the span into a link), since this
378
- will greatly confuse the editor.</dd>
379
-
380
- <dt id="parserConfig"><code>parserConfig</code></dt><dd>An
381
- object value that is passed along to the parser to configure it.
382
- What this object should look like depends on the parser
383
- used.</dd>
384
-
385
- <dt><code>content</code></dt><dd>The starting content of the
386
- editor. You'll probably not want to provide a global default for
387
- this, but add it to the <code>options</code> object passed to
388
- individual editors as they are created.</dd>
389
-
390
- </dl>
391
-
392
- <h2 id="parsers">Parsers</h2>
393
-
394
- <p>(If you want to use a CodeMirror parser to highlight a piece of
395
- text, without creating an editor, see <a
396
- href="highlight.html">this example</a>, and the <code><a
397
- href="js/highlight.js">highlight.js</a></code> script.)</p>
398
-
399
- <p>The following parsers come with the distribution of CodeMirror:</p>
400
-
401
- <dl>
402
- <dt><code><a href="js/parsexml.js">parsexml.js</a></code> (<a
403
- href="htmltest.html">demo</a>)</dt><dd>A HTML/XML parser. Takes
404
- a <code>useHTMLKludges</code> configuration option (see the
405
- <code><a href="#parserConfig">parserConfig</a></code> option
406
- above), which specifies whether the content of the editor is
407
- HTML or XML, and things like self-closing tags (<code>br</code>,
408
- <code>img</code>) exist. This defaults to <code>true</code>.
409
- Example colours for the styles that this parser uses are defined
410
- in <code><a
411
- href="css/xmlcolors.css">css/xmlcolors.css</a></code>.</dd>
412
-
413
- <dt><code><a
414
- href="js/tokenizejavascript.js">tokenizejavascript.js</a></code>,
415
- <code><a
416
- href="js/parsejavascript.js">parseejavascript.js</a></code> (<a
417
- href="jstest.html">demo</a>)</dt><dd>The JavaScript parser.
418
- Example colours in <code><a
419
- href="css/jscolors.css">css/jscolors.css</a></code>. Takes one
420
- configuration option, <code>json</code>, that can be set when
421
- the editor content is JSON data. It causes every opening brace
422
- to be treated as the start of an object, rather than a
423
- block.</dd>
424
-
425
- <dt><code><a href="js/parsecss.js">parsecss.js</a></code> (<a
426
- href="csstest.html">demo</a>)</dt><dd>A CSS parser. Styles in
427
- <code><a
428
- href="css/csscolors.css">css/csscolors.css</a></code></dd>
429
-
430
- <dt><code><a
431
- href="js/parsehtmlmixed.js">parsehtmlmixed.js</a></code> (<a
432
- href="mixedtest.html">demo</a>)</dt><dd>A mixed-mode HTML
433
- parser. Requires the XML, JavaScript, and CSS parsers to also be
434
- loaded, so your <code>parserfile</code> option looks something
435
- like <code>["parsexml.js", "parsecss.js",
436
- "tokenizejavascript.js", "parsejavascript.js",
437
- "parsehtmlmixed.js"]</code>.</dd>
438
-
439
- <dt><code><a href="js/parsesparql.js">parsesparql.js</a></code>
440
- (<a href="sparqltest.html">demo</a>)</dt><dd>Parses the <a
441
- href="http://en.wikipedia.org/wiki/SPARQL">SPARQL</a> query
442
- language. Example styles in <code><a
443
- href="css/sparqlcolors.css">css/sparqlcolors.css</a></code></dd>
444
-
445
- <dt><code><a
446
- href="js/parsedummy.js">parsedummy.js</a></code></dt><dd>A
447
- 'dummy' parser to make it possible to edit plain text, or
448
- documents for which no suitable parser exists.</dd>
449
-
450
- <dt><code><a
451
- href="contrib/php/js/parsephp.js">contrib/php/js/parsephp.js</a></code>
452
- (<a href="contrib/php/index.html">demo</a>)</dt><dd>PHP parser.
453
- There is also <code><a
454
- href="contrib/php/js/parsephphtmlmixed.js">contrib/php/js/parsephphtmlmixed.js</a></code>,
455
- which wraps this parser to allow mixed-mode HTML + PHP parsing.
456
- This one takes a configuration parameter <code>opening</code>,
457
- which should contain an array of XML processing instruction
458
- openings (<code>&lt;?php</code>, <code>&lt;?</code> etc) which
459
- can be used to open a PHP block. Default is
460
- <code>["&lt;?php"]</code>.</dd>
461
-
462
- <dt><code><a
463
- href="contrib/python/js/parsepython.js">contrib/python/js/parsepython.js</a></code>
464
- (<a href="contrib/python/index.html">demo</a>)</dt><dd>Python
465
- parser.</dd>
466
-
467
- <dt><code><a href="contrib/lua/js/parselua.js">contrib/lua/js/parselua.js</a></code>
468
- (<a href="contrib/lua/index.html">demo</a>)</dt><dd>Lua
469
- parser.</dd>
470
-
471
- </dl>
472
-
473
- <h2 id="programming">Programming Interface</h2>
474
-
475
- <p>To be as flexible as possible, CodeMirror implements a very
476
- plain editable field, without any accompanying buttons, bells, and
477
- whistles. <code>CodeMirror</code> objects do, however, provide a
478
- number of methods and properties that make it possible to add
479
- extra functionality around the editor. <a
480
- href="js/mirrorframe.js"><code>mirrorframe.js</code></a> provides
481
- a basic example of their usage.</p>
482
-
483
- <h3 id="properties">Properties</h3>
484
-
485
- <dl>
486
- <dt><code>frame</code></dt><dd>The editable frame.</dd>
487
- <dt><code>win</code></dt><dd>The window of the editable frame.
488
- Mostly useful for attaching event handlers.</dd>
489
- <dt><code>wrapping</code></dt><dd>The <code>DIV</code> element
490
- wrapped around the frame. This always has a CSS class of
491
- <code>CodeMirror-wrapping</code>.</dd>
492
- </dl>
493
-
494
- <h3 id="methods">Methods</h3>
495
-
496
- <dl>
497
- <dt><code>getCode()</code> &#8594;
498
- <code>string</code></dt><dd>Returns the current content of the
499
- editor, as a string.</dd>
500
-
501
- <dt><code>setCode(string)</code></dt><dd>Replaces the current
502
- content of the editor with the given value.</dd>
503
-
504
- <dt><code>focus()</code></dt><dd>Gives focus to the editor
505
- frame.</dd>
506
-
507
- <dt><code>selection()</code> &#8594;
508
- <code>string</code></dt><dd>Returns the text that is currently
509
- selected in the editor.</dd>
510
-
511
- <dt><code>replaceSelection(string)</code></dt><dd>Replaces the
512
- currently selected text with the given string. Will also cause
513
- the editor frame to gain focus.</dd>
514
-
515
- <dt><code>reindent()</code></dt><dd>Automatically re-indent the
516
- whole document.</dd>
517
-
518
- <dt><code>reindentSelection()</code></dt><dd>Automatically
519
- re-indent the selected lines.</dd>
520
-
521
- <dt><code>getSearchCursor(string, startPos, caseFold)</code>
522
- &#8594; <code>cursor</code></dt><dd>The first argument provides
523
- the string that should be searched for. The second determines
524
- where to start searching. It can be <code>false</code> (or left
525
- off) for the start of the document, <code>true</code> for the
526
- current cursor position, or a <code>{line, character}</code>
527
- object (as returned by <code>cursorPosition</code>, or created
528
- yourself using a line handle and a number) to set a random
529
- position. The third argument, a boolean, determines whether the
530
- search will be case-sensitive. If it is not provided, the search
531
- will only be case-sensitive if the search string contains
532
- uppercase characters. Returns an object that provides an
533
- interface for searching. Call its <code>findNext()</code> and
534
- <code>findPrevious()</code> methods to search for an occurrence.
535
- This returns <code>true</code> if something is found, or
536
- <code>false</code> if the end or start of the document was
537
- reached. When an occurrence has been found, you can call
538
- <code>select()</code> to select it, or
539
- <code>replace(string)</code> to replace it with a given string.
540
- To find out where the match was found, call the
541
- <code>position()</code> method, which returns a <code>{line,
542
- character}</code> object. Note that letting the user change the
543
- document, or programmatically changing it in any way except for
544
- calling <code>replace</code> on the cursor itself, might cause a
545
- cursor object to skip back to the beginning of the
546
- document.</dd>
547
-
548
- <dt><code>undo()</code></dt><dd>Undo one changeset, if available.</dd>
549
- <dt><code>redo()</code></dt><dd>Redo one changeset, if available.</dd>
550
- <dt><code>historySize() &#8594; object</code></dt><dd>Get a
551
- <code>{undo, redo}</code> object holding the sizes of the undo
552
- and redo histories.</dd>
553
- <dt><code>clearHistory()</code></dt><dd>Drop all history
554
- information.</dd>
555
-
556
- <dt><code>grabKeys(callback, filter)</code></dt><dd>Route
557
- keyboard input in the editor to a callback function. This
558
- function is given a slightly normalised (see
559
- <code>normalizeEvent</code> in <a
560
- href="js/util.js"><code>util.js</code></a>) <code>keydown</code>
561
- event object. If a second argument is given, this will be used
562
- to determine which events to apply the callback to. It should
563
- take a key code (as in <code>event.keyCode</code>), and return a
564
- boolean, where <code>true</code> means the event should be
565
- routed to the callback, and <code>false</code> leaves the key to
566
- perform its normal behaviour.</dd>
567
- <dt><code>ungrabKeys()</code></dt><dd>Revert the effect of
568
- <code>grabKeys</code>.</dd>
569
-
570
- <dt><code>setParser(name, parserConfig)</code></dt><dd>Change
571
- the active parser. To use this you'll have to load more than one
572
- parser (put the one you want to use as default at the end of the
573
- list). Then call this function with a string containing the name
574
- of the parser you want to switch to (see the parser script file
575
- to find the name, it'll be something like
576
- <code>CSSParser</code>). The second argument is optional, and
577
- can be used to pass a new parser configuration object.</dd>
578
-
579
- <dt><code>cursorCoords(start)</code></dt><dd>Get the coordinates
580
- of the cursor in the editor, relative to the top-left corner of
581
- the outer document. Normally returns an object with
582
- <code>x</code>, <code>y</code>, and <code>yBot</code> (the
583
- bottom of the cursor) properties. May return <code>null</code>
584
- if the cursor position could not be determined (for example, if
585
- the editor is not focused).</dd>
586
- </dl>
587
-
588
- <h3 id="lines">Line Manipulation</h3>
589
-
590
- <p>For detailed interaction with the content of the editor,
591
- CodeMirror exposes a line-oriented interface, which allows you to
592
- inspect and manipulate the document line by line. Line handles
593
- should be considered opaque (they are in fact the <code>BR</code>
594
- nodes at the start of the line), except that the value
595
- <code>false</code> (but <em>not</em> <code>null</code>) always
596
- denotes an invalid value. Since changing the document might cause
597
- some line handles to become invalid, every function that takes
598
- them as argument can throw
599
- <code>CodeMirror.InvalidLineHandle</code>. These are the relevant
600
- methods:</p>
601
-
602
- <dl>
603
- <dt><code>cursorPosition(start)</code> &#8594;
604
- <code>object</code></dt><dd>Retrieve a <code>{line,
605
- character}</code> object representing the cursor position.
606
- <code>start</code> defaults to <code>true</code> and determines
607
- if the startpoint or the endpoint of the selection is used.</dd>
608
- <dt><code>cursorLine()</code> &#8594;
609
- <code>handle</code></dt><dd>Returns the line on which the cursor
610
- is currently sitting.</dd>
611
- <dt><code>firstLine()</code> &#8594;
612
- <code>handle</code></dt><dd>Get the first line of the
613
- document.</dd>
614
- <dt><code>lastLine()</code> &#8594;
615
- <code>handle</code></dt><dd>The last line.</dd>
616
- <dt><code>nextLine(handle)</code> &#8594;
617
- <code>handle</code></dt><dd>Get the line after the given one, or
618
- <code>false</code> if that was the last line.</dd>
619
- <dt><code>prevLine(handle)</code> &#8594;
620
- <code>handle</code></dt><dd>Find the line before the given one,
621
- return <code>false</code> if that was the first line.</dd>
622
- <dt><code>nthLine(number)</code> &#8594;
623
- <code>handle</code></dt><dd>Find the Nth line of the document.
624
- Note that the first line counts as one, not zero. Returns
625
- <code>false</code> if there is no such line.</dd>
626
- <dt><code>lineContent(handle)</code> &#8594;
627
- <code>string</code></dt><dd>Retrieve the content of the
628
- line.</dd>
629
- <dt><code>setLineContent(handle, string)</code></dt><dd>Replace
630
- the content of the line with the given string.</dd>
631
- <dt><code>removeLine(handle)</code></dt><dd>Remove the given
632
- line from the editor. The handle will stay valid after this
633
- operation, and now refers to the next line.</dd>
634
- <dt><code>lineNumber(handle)</code> &#8594;
635
- <code>number</code></dt><dd>Ask which line of the document
636
- (1-based) the given line is.</dd>
637
- <dt><code>jumpToLine(handle)</code></dt><dd>Moves the cursor to
638
- the start of the given line.</dd>
639
- <dt><code>selectLines(startHandle, startOffset,
640
- endHandle, endOffset)</code></dt><dd>Move the selection to a
641
- specific point. <code>endHandle</code> and
642
- <code>endOffset</code> can be omitted to just place the cursor
643
- somewhere without selecting any text.</dd>
644
- <dt><code>insertIntoLine(handle, position,
645
- text)</code></dt><dd>Insert a piece of text into a line.
646
- <code>position</code> can be an integer, specifying the position
647
- in the line where the text should be inserted, or the string
648
- <code>"end"</code>, for the end of the line.</dd>
649
- </dl>
650
-
651
- <h2 id="writeparser">Writing a Parser</h2>
652
-
653
- <p>A parser is implemented by one or more files (see
654
- <code>parserfile</code> above) which, when loaded, add a
655
- <code>Parser</code> property to the <code>Editor</code> object
656
- defined by <a href="js/editor.js"><code>editor.js</code></a>. This
657
- object must support the following interface:</p>
658
-
659
- <dl>
660
-
661
- <dt><code>make(stream)</code></dt><dd>A function that, given a
662
- string stream (see <a
663
- href="js/stringstream.js"><code>stringstream.js</code></a>),
664
- creates a parser. The behaviour of this parser is described
665
- below.</dd>
666
-
667
- <dt><code>electricChars</code></dt><dd>An optional string
668
- containing the characters that, when typed, should cause the
669
- indentation of the current line to be recomputed (for example
670
- <code>"{}"</code> for c-like languages).</dd>
671
-
672
- <dt><code>configure(object)</code></dt><dd>An optional function
673
- that can be used to configure the parser. If it exists, and an
674
- editor is given a <code>parserConfig</code> option, it will be
675
- called with the value of that option.</dd>
676
-
677
- <dt><code>firstIndentation(chars, current,
678
- direction)</code></dt><dd>An optional function that is used to
679
- determine the proper indentation of the first line of a
680
- document. When not provided, <code>0</code> is used.</dd>
681
- </dl>
682
-
683
- <p>When the <code>make</code> method is called with a string
684
- stream, it should return a MochiKit-style iterator: an object with
685
- a <code>next</code> method, which will raise
686
- <code>StopIteration</code> when it is at its end (see <a
687
- href="http://bob.pythonmac.org/archives/2005/07/06/iteration-in-javascript/">this</a>
688
- for details). This iterator, when called, will consume input from
689
- the string stream, and produce a token object.</p>
690
-
691
- <p>Token objects represent a single significant piece of the text
692
- that is being edited. A token object must have a
693
- <code>value</code> property holding the text it stands for, and a
694
- <code>style</code> property with the CSS class that should be used
695
- to colour this element. This can be anything, except that any
696
- whitespace at the start of a line should <em>always</em> have
697
- class <code>"whitespace"</code>: The editor must be able to
698
- recognize these when it indents lines. Furthermore, each newline
699
- character <em>must</em> have its own separate token, which has an
700
- <code>indentation</code> property holding a function that can be
701
- used to determine the proper indentation level for the next line.
702
- This function optionally takes the text in the first token of the
703
- next line, the current indentation of the line, and the
704
- 'direction' of the indentation as arguments, which it can use to
705
- adjust the indentation level. The direction argument is only
706
- useful for modes in which lines do not have a fixed indentation,
707
- and can be modified by multiple tab presses. It is
708
- <code>null</code> for 'default' indentations (like what happens
709
- when the user presses enter), <code>true</code> for regular tab
710
- presses, and <code>false</code> for control-tab or shift-tab.</p>
711
-
712
- <p>So far this should be pretty easy. The hard part is that this
713
- iterator must also have a <code>copy</code> method. This method,
714
- called without arguments, returns a function representing the
715
- current state of the parser. When this state function is later
716
- called with a string stream as its argument, it returns a parser
717
- object that resumes parsing using the old state and the new input
718
- stream. It may assume that only one parser is active at a time,
719
- and can clobber the state of the old parser if it wants.</p>
720
-
721
- <p>For examples, see <a
722
- href="js/parsejavascript.js"><code>parsejavascript.js</code></a>,
723
- <a href="js/parsexml.js"><code>parsexml.js</code></a>, and <a
724
- href="js/parsecss.js"><code>parsecss.js</code></a>.</p>
725
-
726
- </div><div class="rightsmall blk">
727
-
728
- <h2>Contents</h2>
729
-
730
- <ul>
731
- <li><a href="#usage">Basic Usage</a></li>
732
- <li><a href="#configuration">Configuration</a></li>
733
- <li><a href="#parsers">Parsers</a></li>
734
- <li><a href="#programming">Programming Interface</a>
735
- <ul>
736
- <li><a href="#properties">Properties</a></li>
737
- <li><a href="#methods">Methods</a></li>
738
- <li><a href="#lines">Line Manipulation</a></li>
739
- </ul>
740
- </li>
741
- <li><a href="#writeparser">Writing a Parser</a></li>
742
- </ul>
743
-
744
- <h2>Site</h2>
745
-
746
- <ul>
747
- <li><a href="index.html">Front Page</a></li>
748
- <li><a href="faq.html">FAQ</a></li>
749
- <li><a href="http://groups.google.com/group/codemirror">Google Group</a></li>
750
- <li><a href="compress.html">Compression Helper</a></li>
751
- <li><a href="story.html">War Story</a></li>
752
- </ul>
753
-
754
- </div></div>
755
-
756
- <div style="height: 2em">&nbsp;</div>
757
-
758
- </body>
759
- </html>