third-party/codemirror-3.15/demo/search.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   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">
  14
  15     <style type="text/css">
  16       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  17       dt {font-family: monospace; color: #666;}
  18     </style>
  19   </head>
  20   <body>
  21     <h1>CodeMirror: Search/Replace Demo</h1>
  22
  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>
  27
  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:
  31     <dl>
  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
  40       lines one unit.</dd>
  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
  48       control).</dd>
  49     </dl></dd>
  50
  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:
  54     <dl>
  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>
  62     </dl></dd>
  63 </textarea></form>
  64
  65     <script>
  66 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "text/html", lineNumbers: true});
  67 </script>
  68
  69     <p>Demonstration of primitive search/replace functionality. The
  70     keybindings (which can be overridden by custom keymaps) are:</p>
  71     <dl>
  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>
  77     </dl>
  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>
  84   </body>
  85 </html>