javascript - CodeMirror インスタンスを取得する

Question

CodeMirror のインスタンスを取得したい (テキストエリア '#code' にバインドされている)。onclick-event から、CodeMirror インスタンスの現在の値に値を追加したいと考えています。これはどのように達成できますか？ドキュメントから、インスタンスを取得してjavascriptのloca varにバインドするものを見つけることができないようです。

Answer 1

コード ミラー インスタンスのルート DOM 要素を提供するgetWrapperElementオン コード ミラー エディター オブジェクトがあります。

var codemirrorDomElem = editor.getWrapperElement();

Answer 2

から始まり<textarea>、次の兄弟に移動するインスタンスを見つけることができます。

ネイティブ

• 機能的

  document.querySelector('#code').nextSibling,
  

• セレクタ

  document.querySelector('#code + .CodeMirror'),
  

jQuery

• 機能的

  $('#code').next('.CodeMirror').get(0),
  

• セレクタ

  $('#code + .CodeMirror').get(0)
  

おまけ: clipboard.jsを含むより高度なソリューション-> JSFiddle Demo

---

例

// Selector for textarea
var selector = '#code';

$(function() {
  var editor = CodeMirror.fromTextArea($(selector).get(0), {
    mode: 'javascript',
    theme: 'paraiso-dark',
    lineNumbers : true
  });
  editor.setSize(320, 240);
  editor.getDoc().setValue(JSON.stringify(getSampleData(), null, 4));
  
  $('#response').text(allEqual([
    document.querySelector(selector).nextSibling,        // Native - Functional
    document.querySelector(selector + ' + .CodeMirror'), // Native - Selector
    $(selector).next('.CodeMirror').get(0),              // jQuery - Functional
    $(selector + ' + .CodeMirror').get(0)                // jQuery - Selector
  ]));
});

function allEqual(arr) {
  return arr.every(function(current, index, all) {
    return current === all[(index + 1) % all.length];
  });
};

// Return sample JSON data.
function getSampleData() {
	return [
        { color: "red",     value: "#f00" },
        { color: "green",   value: "#0f0" },
        { color: "blue",    value: "#00f" }
    ];
}

#response { font-weight: bold; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/theme/paraiso-dark.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>All equal?: <span id="response"></span></div>
<textarea rows="10" cols="60" id="code"></textarea>