javascriptcodemirrorternui-codemirror

How to set a hidden values in CodeMirror editor?

i wanna write a Custom language for a customer. i wanna evaluate something. THere is a web service. Some json data will come from a service.

var data = {"a": {"foo": "bar-a", "bar": "baz-a"}, "b": {"foo": "bar-b", "bar": "baz-b", "moo": "huzzah"}}

i have to access these data inside editor.

But i should not see this data as a hard code in my editor. i kniw SETVALUE methid. but it will add json in editor. i dont want this. How to set value and hide in editor?

below ; this is my code. i dont want to see data json. but i have to access ctrl+SPACE. 

<style>
      .CodeMirror {border: 1px solid #ddd;}
    </style>
<div id=nav>
  <a href="http://codemirror.net"><h1>XXX</h1><img id=logo src="../doc/logo.png"></a>

  <ul>
    <li><a href="#">Home</a>
    <li><a href="#">AnaSayfa</a>
    <li><a href="#">Test</a>
  </ul>
  <ul>
    <li><a class=active href="#">Run</a>
  </ul>
</div>

<article>
<h2>Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something

</textarea></p>

<dl>
  <dt>Ctrl-Space</dt><dd>Otomatik Tamalayıcı</dd>
  <dt>Ctrl-I</dt><dd>Tip Bulucu</dd>
 
</dl>

<script>
  function getURL(url, c) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.send();
    xhr.onreadystatechange = function() {
      if (xhr.readyState != 4) return;
      if (xhr.status < 400) return c(null, xhr.responseText);
      var e = new Error(xhr.responseText || "No response");
      e.status = xhr.status;
      c(e);
    };
  }

  var server;
  getURL("http://ternjs.net/defs/ecma5.json", function(err, code) {
    if (err) throw new Error("Request for ecma5.json: " + err);
    server = new CodeMirror.TernServer({defs: [JSON.parse(code)]});
    editor.setOption("extraKeys", {
      "Ctrl-Space": function(cm) { server.complete(cm); },
      "Ctrl-I": function(cm) { server.showType(cm); },
      "Ctrl-O": function(cm) { server.showDocs(cm); },
      "Alt-.": function(cm) { server.jumpToDef(cm); },
      "Alt-,": function(cm) { server.jumpBack(cm); },
      "Ctrl-Q": function(cm) { server.rename(cm); },
      "Ctrl-.": function(cm) { server.selectName(cm); }
    })
    editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); });
  });
    
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: "javascript"
  });
    
      editor.setValue('var data = {"a": {"foo": "bar-a", "bar": "baz-a"}, "b": {"foo": "bar-b", "bar": "baz-b", "moo": "huzzah"}}')
    
</script>

  </article>

Solution

  • If you need to have an extra option for your CodeMirror Editor instance, you can use it this way:

    editor.setOption("customTernData", {
  "a": {
    "foo": "bar-a",
    "bar": "baz-a"
  },
  "b": {
    "foo": "bar-b",
    "bar": "baz-b",
    "moo": "huzzah"
  }
})

    And to access the data use the following snippet

    editor.getOption("customTernData")

    This way you can set and get the extra information you need to have it in the editor context itself and no need to store the information in the editor area.