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

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Placeholder demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../addon/display/placeholder.js"></script>
   9     <link rel="stylesheet" href="../doc/docs.css">
  10
  11     <style type="text/css">
  12       .CodeMirror { border: 1px solid silver; }
  13       .CodeMirror-empty { outline: 1px solid #c22; }
  14       .CodeMirror-empty.CodeMirror-focused { outline: none; }
  15       .CodeMirror pre.CodeMirror-placeholder { color: #999; }
  16     </style>
  17   </head>
  18   <body>
  19     <h1>CodeMirror: Placeholder demo</h1>
  20
  21     <form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
  22
  23     <p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
  24     plug-in adds an option <code>placeholder</code> that can be set to
  25     make text appear in the editor when it is empty and not focused.
  26     If the source textarea has a <code>placeholder</code> attribute,
  27     it will automatically be inherited.</p>
  28
  29     <script>
  30       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  31         lineNumbers: true
  32       });
  33     </script>
  34
  35   </body>
  36 </html>