Get CodeMirror Instance + Copy

Retrieve a CodeMirror Instance by selector using native JavaScript and jQuery.

by abuhamzah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.2/clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/theme/paraiso-dark.min.css">
<textarea rows="10" cols="60" id="code-editor"></textarea>
<button class="btn btn-warning clip-btn-native" data-toggle="tooltip" title="Copy w/ Native">
    <span class="glyphicon glyphicon-copy"> Native</span>
</button>
<button class="btn btn-warning clip-btn-jquery" data-toggle="tooltip" title="Copy w/ jQuery">
    <span class="glyphicon glyphicon-copy"> jQuery</span>
</button>
<button class="btn btn-warning clip-btn-jquery-plugin" data-toggle="tooltip" title="Copy w/ jQuery Plugin">
    <span class="glyphicon glyphicon-copy"> jQuery-plugin</span>
</button>

CSS

.CodeMirror {
    font-size: 8pt;
    margin-bottom: 4px;
}
button.btn {
    margin-left: 6px;
}

JavaScript

$(function() {
	var editorSelector = '#code-editor';
    var editor = createEditor({
        target: $(editorSelector).get(0),
        data: getSampleData(),
        theme: 'paraiso-dark',
        readOnly: true,
        lineNumbers: true,
        width: 340,
        height: 460
    });
    
    // Instantiate Bootstrap tooltips.
    $('[data-toggle="tooltip"]').tooltip(); 
    
    new Clipboard('.clip-btn-native', {
        text: function(trigger) {
            return getCodeMirrorNative(editorSelector).getDoc().getValue();
        }
    });

    new Clipboard('.clip-btn-jquery', {
        text: function(trigger) {
            return getCodeMirrorJQuery(editorSelector + ' + .CodeMirror').getDoc().getValue();
        }
    });

    new Clipboard('.clip-btn-jquery-plugin', {
        text: function(trigger) {
            return $(editorSelector).getCodeMirror().getDoc().getValue();;
        }
    });
});

// Retrieve a CodeMirror Instance via native JavaScript.
function getCodeMirrorNative(target) {
    var _target = target;
    if (typeof _target === 'string') {
        _target = document.querySelector(_target);
    }
    if (_target === null || !_target.tagName === undefined) {
        throw new Error('Element does not reference a CodeMirror instance.');
    }
    
    if (_target.className.indexOf('CodeMirror') > -1) {
        return _target.CodeMirror;
    }

    if (_target.tagName === 'TEXTAREA') {
        return _target.nextSibling.CodeMirror;
    }
    
    return null;
};

// Retrieve a CodeMirror Instance via jQuery.
function getCodeMirrorJQuery(target) {
    var $target = target instanceof jQuery ? target : $(target);
    if ($target.length === 0) {
        throw new Error('Element does not reference a CodeMirror instance.');
    }
    
    if (!$target.hasClass('CodeMirror')) {
    	if ($target.is('textarea')) {
            $target = $target.next('.CodeMirror');
        }
    }

    return $target.get(0).CodeMirror;
};

// Retrieve a CodeMirror via...