Does codemirror provide a cut, copy, and paste API?

Question

From http://codemirror.net/doc/manual.html I only find getRange() , undo (), redo (), etc. and I can not find cut (), copy () API and paste, and more, when I try to run editor.execCommand("cut") , I get an error. Could you help me? Thanks!

Answer 1

Using clipboard.js , you can define the text() function to capture the value of the internal code of a CodeMirror document.

Save the selector link ( <textarea> ) for convenience.

 var editorSelector = '#editor' // or '#editor + .CodeMirror'; 

Create a new ClipBoard object with a link to your button.

 new Clipboard('.clip-btn-native', { text: function(trigger) { return getCodeMirrorNative(editorSelector).getDoc().getValue(); } }); 

Get an instance of CodeMirror through 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; }; 

---

Demo

See full; in-depth demo on JSFiddle .

Answer 2

There are no CodeMirror APIs to cut / copy / paste as browser security restrictions prohibit JavaScript access to the clipboard programmatically. Paste can be used to steal personal data, and Cut / Copy can be used as a more complex attack vector .

The browser’s own native code processes user gestures that access the buffer (keyboard shortcuts and context menu items) based solely on the currently selected text or focused text field.

This SO thread provides a good summary of attempts to circumvent these limitations. The CodeMirror approach is the first pool: it uses a hidden text area to ensure that user clipboard gestures work, but which still do not support software APIs.

But there is a partial workaround: use a small Flash widget (this is the second bullet in the stream above). Flash relaxes Copy / Cut restrictions a bit (but not paste). It should still be triggered by some kind of user event, but it could be something like a button click in your HTML interface. Packers like ZeroClipboard and Clippy make provide easy access to these features without having to know Flash. You will need to write a small glue code to pull the corresponding line from CodeMirror when copying, but this should not be too bad.

Answer 3

Add the hidden contenteditable div to your textarea editor shell. Contenteditable divs refer to new lines and tabs that we need when copying code.

Here is my CodePen demo

HTML:

 <div class="content"> <!-- button to copy the editor --> <div class="copy-code"></div> <!-- add contenteditable div as it respects new lines when copying unlike textarea --> <div class="copy-this" contenteditable style="display: none"></div> <textarea class="editor" style="display: none;">// here is one line of code</textarea> </div> 

JS:

 var content = $('.content'); var toCopy = content.find('.copy-this'); // initialize the editor var editor = CodeMirror.fromTextArea(content.find(".editor")[0], editorOptions); content[0].editor = editor; editor.save(); // set editors value from the textarea var text = content.find('.editor').text(); editor.setValue(text); // setting with editor.getValue() so that it respects \n and \t toCopy.text(editor.getValue()); $(document).on('click', '.copy-code', function() { var content = $(this).closest('.content'); var editor = content[0].editor; var toCopy = content.find('.copy_this')[0]; var innerText = toCopy.innerText // using innerText here because it preserves newlines // write the text to the clipboard navigator.clipboard.writeText(innerText); });