web-dev-qa-db-ja.com

CodeMirrorインスタンスを取得

CodeMirrorのインスタンスを取得したい（それはtextarea '#code'にバインドされている）。 onclickイベントから、CodeMirrorインスタンスの現在の値に値を追加します。どうすればこれを達成できますか？ドキュメントから、インスタンスを取得してjavascriptでloca varにバインドするためのものが見つからないようです。

javascriptcodemirror
26
Ben Fransen

誰かが回答を投稿したが削除した。それにもかかわらず、それは実用的な解決策でした。ありがとう！

-基本的にこれは彼の解決策でした：

// create an instance
var editor = CodeMirror.fromTextArea('code');
// store it
$('#code').data('CodeMirrorInstance', editor);
// get it
var myInstance = $('code').data('CodeMirrorInstance');
// from here on the API functions are available to 'myInstance' again.
13
Ben

私が見つけた別の方法 elsewhere は次のとおりです：

//Get a reference to the CodeMirror editor
var editor = document.querySelector('.CodeMirror').CodeMirror;

これは、CodeMirrorインスタンスを動的に作成する場合、または既存のDOM要素をCodeMirrorインスタンスで置き換える場合に適切に機能します。

52
ashatte

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

var codemirrorDomElem = editor.getWrapperElement();
6
Alireza Mirian

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

ネイティブ

  • 機能的

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

  • セレクタ

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

jQuery

  • 機能的

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

  • セレクタ

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

Extra：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>
1
Mr. Polywhirl

私はVue CLI 3、vue-codemirrorコンポーネントを次のように使用しています：

<codemirror id="textarea_editor" v-model="textarea_input" :options="cm_editor_config"></codemirror>

ページ内で使用するインポートcodemirror：

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

codemirrorオブジェクト内にcomponentsを追加するだけです。その後、dataセクションの構成は次のようになります。

codemirror_editor: undefined,
cm_editor_config: {
    tabSize: 4,
    mode: 'application/json',
    theme: 'base16-dark',
    lineNumbers: true,
    // lineWrapping: true,
    styleActiveSelected: true,
    line: true,
}

mountedのVueライフサイクルセクションでオブジェクトを初期化しました：

mounted () {
    if ( !this.codemirror_editor ) {
        this.codemirror_editor = $('#textarea_editor').find('.CodeMirror').get(0).CodeMirror;
    }
    // do something with this.codemirror_editor
}

これが多くの人に役立つことを願っています。

0
ArifMustafa