123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>CodeMirror: XML Autocomplete Demo</title>
- <link rel="stylesheet" href="../lib/codemirror.css">
- <script src="../lib/codemirror.js"></script>
- <script src="../addon/hint/show-hint.js"></script>
- <link rel="stylesheet" href="../addon/hint/show-hint.css">
- <script src="../addon/edit/closetag.js"></script>
- <script src="../addon/hint/xml-hint.js"></script>
- <script src="../mode/xml/xml.js"></script>
- <link rel="stylesheet" href="../doc/docs.css">
- <style type="text/css">
- .CodeMirror { border: 1px solid #eee; height: auto; }
- .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; }
- </style>
- </head>
- <body>
- <h1>CodeMirror: XML Autocomplete demo</h1>
- <form><textarea id="code" name="code"></textarea></form>
- <p>Type '<' or space inside tag or
- press <strong>ctrl-space</strong> to activate autocompletion. See
- the code (<a href="../addon/hint/show-hint.js">here</a>
- and <a href="../addon/hint/xml-hint.js">here</a>) to figure out how
- it works.</p>
- <script>
- CodeMirror.xmlHints['<'] = [
- 'levelTop',
- 'levelRoot',
- 'mainLevel'
- ];
- CodeMirror.xmlHints['<levelTop '] =
- CodeMirror.xmlHints['<levelRoot '] =
- CodeMirror.xmlHints['<mainLevel '] = [
- 'property1111',
- 'property2222'
- ];
- CodeMirror.xmlHints['<levelTop><'] =
- CodeMirror.xmlHints['<levelRoot><'] =
- CodeMirror.xmlHints['<mainLevel><'] = [
- 'second',
- 'two'
- ];
- CodeMirror.xmlHints['<levelTop><second '] = [
- 'secondProperty'
- ];
- CodeMirror.xmlHints['<levelTop><second><'] = [
- 'three',
- 'x-three'
- ];
- CodeMirror.commands.autocomplete = function(cm) {
- CodeMirror.showHint(cm, CodeMirror.xmlHint);
- }
- function passAndHint(cm) {
- setTimeout(function() {cm.execCommand("autocomplete");}, 100);
- return CodeMirror.Pass;
- }
- var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
- value: '',
- mode: 'text/html',
- lineNumbers: true,
- extraKeys: {
- "' '": passAndHint,
- "'<'": passAndHint,
- "Ctrl-Space": "autocomplete"
- },
- autoCloseTags: true
- });
- </script>
- </body>
- </html>
|