5 <title>CodeMirror: Search/Replace Demo</title>
6 <link rel="stylesheet" href="../lib/codemirror.css">
7 <script src="../lib/codemirror.js"></script>
8 <script src="../mode/xml/xml.js"></script>
9 <script src="../addon/dialog/dialog.js"></script>
10 <link rel="stylesheet" href="../addon/dialog/dialog.css">
11 <script src="../addon/search/searchcursor.js"></script>
12 <script src="../addon/search/search.js"></script>
13 <link rel="stylesheet" href="../doc/docs.css">
15 <style type="text/css">
16 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
17 dt {font-family: monospace; color: #666;}
21 <h1>CodeMirror: Search/Replace Demo</h1>
23 <form><textarea id="code" name="code">
24 <dt id="option_indentWithTabs"><code>indentWithTabs (boolean)</code></dt>
25 <dd>Whether, when indenting, the first N*8 spaces should be
26 replaced by N tabs. Default is false.</dd>
28 <dt id="option_tabMode"><code>tabMode (string)</code></dt>
29 <dd>Determines what happens when the user presses the tab key.
30 Must be one of the following:
32 <dt><code>"classic" (the default)</code></dt>
33 <dd>When nothing is selected, insert a tab. Otherwise,
34 behave like the <code>"shift"</code> mode. (When shift is
35 held, this behaves like the <code>"indent"</code> mode.)</dd>
36 <dt><code>"shift"</code></dt>
37 <dd>Indent all selected lines by
38 one <a href="#option_indentUnit"><code>indentUnit</code></a>.
39 If shift was held while pressing tab, un-indent all selected
41 <dt><code>"indent"</code></dt>
42 <dd>Indent the line the 'correctly', based on its syntactic
43 context. Only works if the
44 mode <a href="#indent">supports</a> it.</dd>
45 <dt><code>"default"</code></dt>
46 <dd>Do not capture tab presses, let the browser apply its
47 default behaviour (which usually means it skips to the next
51 <dt id="option_enterMode"><code>enterMode (string)</code></dt>
52 <dd>Determines whether and how new lines are indented when the
53 enter key is pressed. The following modes are supported:
55 <dt><code>"indent" (the default)</code></dt>
56 <dd>Use the mode's indentation rules to give the new line
57 the correct indentation.</dd>
58 <dt><code>"keep"</code></dt>
59 <dd>Indent the line the same as the previous line.</dd>
60 <dt><code>"flat"</code></dt>
61 <dd>Do not indent the new line.</dd>
66 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", lineNumbers: true});
69 <p>Demonstration of primitive search/replace functionality. The
70 keybindings (which can be overridden by custom keymaps) are:</p>
72 <dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd>
73 <dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd>
74 <dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd>
75 <dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd>
76 <dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd>
78 <p>Searching is enabled by
79 including <a href="../addon/search/search.js">addon/search/search.js</a>
80 and <a href="../addon/search/searchcursor.js">addon/search/searchcursor.js</a>.
81 For good-looking input dialogs, you also want to include
82 <a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a>
83 and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p>