html5complete.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: Close-Tag Demo</title>
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <script src="../addon/hint/show-hint.js"></script>
  9. <link rel="stylesheet" href="../addon/hint/show-hint.css">
  10. <script src="../addon/edit/closetag.js"></script>
  11. <script src="../addon/hint/html-hint.js"></script>
  12. <script src="../mode/xml/xml.js"></script>
  13. <script src="../mode/javascript/javascript.js"></script>
  14. <script src="../mode/css/css.js"></script>
  15. <script src="../mode/htmlmixed/htmlmixed.js"></script>
  16. <link rel="stylesheet" href="../doc/docs.css">
  17. <style type="text/css">
  18. .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
  19. </style>
  20. </head>
  21. <body>
  22. <h1>HTML5 code completation demo</h1>
  23. <ul>
  24. <li>Type an html tag. If you press Ctrl+Space a hint panel show the code suggest. You can type to autocomplete tags, attributes if your cursor are inner a tag or attribute values if your cursor are inner a attribute value.</li>
  25. </ul>
  26. <form><textarea id="code" name="code">
  27. <!DOCTYPE html>
  28. <html lang="en">
  29. <head>
  30. <meta charset="utf-8">
  31. <title>Home - W2S Web IDE</title>
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33. <meta name="description" content="">
  34. <meta name="author" content="">
  35. </head>
  36. <body>
  37. <div class="container">
  38. <div class="masthead">
  39. <h3 class="muted">HTML5 Autocomplete</h3>
  40. <div class="navbar">
  41. <div class="navbar-inner">
  42. <div class="container">
  43. <ul class="nav">
  44. <li class=" active "><a href="#">Home</a></li>
  45. <li class=""><a href="#">Features</a></li>
  46. <li class=""><a href="#">Sign In</a></li>
  47. </ul>
  48. </div>
  49. </div>
  50. </div><!-- /.navbar -->
  51. </div>
  52. <!-- Jumbotron -->
  53. <div class="jumbotron">
  54. <img src="/Images/w2s.png" />
  55. <h1>W2S Cloud IDE</h1>
  56. </div>
  57. <hr>
  58. <hr>
  59. <div class="footer">
  60. Final of html5 autocomplete
  61. </div>
  62. </div> <!-- /container -->
  63. </body>
  64. </html>
  65. </textarea></form>
  66. <script type="text/javascript">
  67. CodeMirror.commands.autocomplete = function(cm) {
  68. CodeMirror.showHint(cm, CodeMirror.htmlHint);
  69. }
  70. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  71. mode: 'text/html',
  72. autoCloseTags: true,
  73. extraKeys: {"Ctrl-Space": "autocomplete"}
  74. });
  75. </script>
  76. </body>
  77. </html>