openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

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 '&lt;' 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>