Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>CM2 does not directly support the feature you are looking for. However, I used a trick involving the <code>onFocus</code> handler that they support to disallow the user from focusing on the Codemirror element, and therefore disallowing editing. My explanation that follows presupposes that you've looked through here: <a href="http://codemirror.net/manual.html" rel="nofollow">http://codemirror.net/manual.html</a>. You'll probably want to use jQuery for this technique, but it isn't required. You are talking about having code in a <code>div</code> so I'm assuming you know how to attach Codemirror to a <code>div</code> element.</p> <ol> <li>Create a <code>&lt;input id="tricky"&gt;</code> textfield of some sort that is hidden. You can use whatever technique for "hiding" it that you wish, but I can tell you that setting the CSS to <code>"display:none"</code> won't work. <code>visibility:hidden</code> might work, but probably better to just position the div off the page somewhere.</li> <li>Setup an <code>onFocus</code> handler per the Codemirror2 documentation in the above link, </li> <li>Inside your <code>onFocus</code> event handler, do something like: <br/><br/> <code>$("tricky").focus();</code> <br/> or without jQuery:<br/> <code>document.getElementById("tricky").focus();</code></li> </ol> <p>and you instantly redirect focus to an invisible field and no one can edit the code that you display. There is probably some clever way to defeat this method, but it'll work for 99% of cases. It's a bit of trickiness, but at least you don't have to diddle with the innards of Codemirror.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload