xmlcomplete.html (3703B)
1 <!doctype html> 2 3 <title>CodeMirror: XML Autocomplete Demo</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="../doc/docs.css"> 6 7 <link rel="stylesheet" href="../lib/codemirror.css"> 8 <link rel="stylesheet" href="../addon/hint/show-hint.css"> 9 <script src="../lib/codemirror.js"></script> 10 <script src="../addon/hint/show-hint.js"></script> 11 <script src="../addon/hint/xml-hint.js"></script> 12 <script src="../mode/xml/xml.js"></script> 13 <style type="text/css"> 14 .CodeMirror { border: 1px solid #eee; } 15 </style> 16 <div id=nav> 17 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 18 19 <ul> 20 <li><a href="../index.html">Home</a> 21 <li><a href="../doc/manual.html">Manual</a> 22 <li><a href="https://github.com/codemirror/codemirror">Code</a> 23 </ul> 24 <ul> 25 <li><a class=active href="#">XML Autocomplete</a> 26 </ul> 27 </div> 28 29 <article> 30 <h2>XML Autocomplete Demo</h2> 31 <form><textarea id="code" name="code"><!-- write some xml below --> 32 </textarea></form> 33 34 <p>Press <strong>ctrl-space</strong>, or type a '<' character to 35 activate autocompletion. This demo defines a simple schema that 36 guides completion. The schema can be customized—see 37 the <a href="../doc/manual.html#addon_xml-hint">manual</a>.</p> 38 39 <p>Development of the <code>xml-hint</code> addon was kindly 40 sponsored 41 by <a href="http://www.xperiment.mobi">www.xperiment.mobi</a>.</p> 42 43 <script> 44 var dummy = { 45 attrs: { 46 color: ["red", "green", "blue", "purple", "white", "black", "yellow"], 47 size: ["large", "medium", "small"], 48 description: null 49 }, 50 children: [] 51 }; 52 53 var tags = { 54 "!top": ["top"], 55 "!attrs": { 56 id: null, 57 class: ["A", "B", "C"] 58 }, 59 top: { 60 attrs: { 61 lang: ["en", "de", "fr", "nl"], 62 freeform: null 63 }, 64 children: ["animal", "plant"] 65 }, 66 animal: { 67 attrs: { 68 name: null, 69 isduck: ["yes", "no"] 70 }, 71 children: ["wings", "feet", "body", "head", "tail"] 72 }, 73 plant: { 74 attrs: {name: null}, 75 children: ["leaves", "stem", "flowers"] 76 }, 77 wings: dummy, feet: dummy, body: dummy, head: dummy, tail: dummy, 78 leaves: dummy, stem: dummy, flowers: dummy 79 }; 80 81 function completeAfter(cm, pred) { 82 var cur = cm.getCursor(); 83 if (!pred || pred()) setTimeout(function() { 84 if (!cm.state.completionActive) 85 cm.showHint({completeSingle: false}); 86 }, 100); 87 return CodeMirror.Pass; 88 } 89 90 function completeIfAfterLt(cm) { 91 return completeAfter(cm, function() { 92 var cur = cm.getCursor(); 93 return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<"; 94 }); 95 } 96 97 function completeIfInTag(cm) { 98 return completeAfter(cm, function() { 99 var tok = cm.getTokenAt(cm.getCursor()); 100 if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false; 101 var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state; 102 return inner.tagName; 103 }); 104 } 105 106 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 107 mode: "xml", 108 lineNumbers: true, 109 extraKeys: { 110 "'<'": completeAfter, 111 "'/'": completeIfAfterLt, 112 "' '": completeIfInTag, 113 "'='": completeIfInTag, 114 "Ctrl-Space": "autocomplete" 115 }, 116 hintOptions: {schemaInfo: tags} 117 }); 118 </script> 119 </article>