http://jsfiddle.net/tZVsS/72/
クラスの最初の2つの要素のいずれかをダブルクリックすると.code
、setOptionsがクラスの最後の要素にのみ適用されることがわかります.code
。私が行う必要があるのは、個々の要素をダブルクリックすると、その要素に適用されるsetoptionが機能しないのはなぜですか、それを修正するために何ができるのですか?
(function () {
var codes = document.getElementsByClassName("code");
for (i = 0; i < codes.length; i++) {
var $this = codes[i];
var $unescaped = $this.innerHTML.replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
var isspan = $this.nodeName.toLowerCase() == "span";
$this.innerHTML = "";
if (isspan) {
$this.style.display = "inline-block"
} else {
$this.style.display = "inline"
}
var editor = new CodeMirror($this, {
value: $unescaped,
mode: 'javascript',
lineNumbers: false,
readOnly: true
});
$this.ondblclick = function () {
editor.setOption("readOnly", false);
editor.setOption("lineNumbers", true);
}
}
})();
HTMLは以下のとおりです。注:あまり使用されません。代わりに、フィドルで行ったことをさかのぼって理解を深めてください。
Some code <span class="code inline">function inline() { alert('inline code') }</span> inside
a sentence.
<div class="code">function test() { return false; }</div>