xmlcomplete.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: XML Autocomplete 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/xml-hint.js"></script>
  12. <script src="../mode/xml/xml.js"></script>
  13. <link rel="stylesheet" href="../doc/docs.css">
  14. <style type="text/css">
  15. .CodeMirror { border: 1px solid #eee; height: auto; }
  16. .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>CodeMirror: XML Autocomplete demo</h1>
  21. <form><textarea id="code" name="code"></textarea></form>
  22. <p>Type '&lt;' or space inside tag or
  23. press <strong>ctrl-space</strong> to activate autocompletion. See
  24. the code (<a href="../addon/hint/show-hint.js">here</a>
  25. and <a href="../addon/hint/xml-hint.js">here</a>) to figure out how
  26. it works.</p>
  27. <script>
  28. CodeMirror.xmlHints['<'] = [
  29. 'levelTop',
  30. 'levelRoot',
  31. 'mainLevel'
  32. ];
  33. CodeMirror.xmlHints['<levelTop '] =
  34. CodeMirror.xmlHints['<levelRoot '] =
  35. CodeMirror.xmlHints['<mainLevel '] = [
  36. 'property1111',
  37. 'property2222'
  38. ];
  39. CodeMirror.xmlHints['<levelTop><'] =
  40. CodeMirror.xmlHints['<levelRoot><'] =
  41. CodeMirror.xmlHints['<mainLevel><'] = [
  42. 'second',
  43. 'two'
  44. ];
  45. CodeMirror.xmlHints['<levelTop><second '] = [
  46. 'secondProperty'
  47. ];
  48. CodeMirror.xmlHints['<levelTop><second><'] = [
  49. 'three',
  50. 'x-three'
  51. ];
  52. CodeMirror.commands.autocomplete = function(cm) {
  53. CodeMirror.showHint(cm, CodeMirror.xmlHint);
  54. }
  55. function passAndHint(cm) {
  56. setTimeout(function() {cm.execCommand("autocomplete");}, 100);
  57. return CodeMirror.Pass;
  58. }
  59. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  60. value: '',
  61. mode: 'text/html',
  62. lineNumbers: true,
  63. extraKeys: {
  64. "' '": passAndHint,
  65. "'<'": passAndHint,
  66. "Ctrl-Space": "autocomplete"
  67. },
  68. autoCloseTags: true
  69. });
  70. </script>
  71. </body>
  72. </html>