search.html 3.5 KB

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