Paste into CodeMirror not working in my application

1

Hi,

Paste from the clipboard into a CodeMirror (textarea) instance in my application/web page is not working. I have successfully pasted in a standalone (test) page, so it must be something that I am doing in the page. I am using version 5.25.2, and have tested this in Chrome (current - version Version 60.0.3112.113) and Firefox (current - version 55.0.3).

In the page, CodeMirror is instantiated for a jquery dialog window - triggered when a menu selection is made, where the html - containing the textarea used for CodeMirror - is generated dynamically.

ie. (a snippet)
var html = ‘<div id=“node-edit-codemirror-editor-div”>’
+ ‘<textarea id=“node-edit-codemirror-editor” name=“node-edit-codemirror-editor” rows=“2” cols=“50”>’ + template_content + ‘’
+ ‘</div>’;
codemirror_editor = CodeMirror.fromTextArea(document.getElementById(“node-edit-codemirror-editor”), {
mode: {name: “python”,
version: 2,
singleLineStringErrors: false},
lineNumbers: true,
indentUnit: 4,
matchBrackets: true,
autoRefresh: true
});

$("#show-template-editor-dialog").dialog(…); – displays the window

Is there any option I should add to enable this?

I tried adding a ‘paste’ listener, but this does nothing - the handler function never gets called

eg.
document.addEventListener(“paste”, onPaste);

function onPaste(e) {
…
}

I also tried a ‘keydown’ handler, which does get called, but has no clipboard data.

Please help. What am I missing?

Colin Goldberg

2

Nope, paste should work out of the box. You could try editing your setup to be closer and closer to the demo pages, and seeing where paste starts working.

3

The strange thing is that I also use tinymce inside this page, and it
pastes ok. CodeMirror must be implementing this differently than tinymce.

(I use tinymce for html & text, and I would like to use CodeMirror for
python, pyspark, json, yaml, sql, scala, and possibly others.)

Colin Goldberg

4

I have reduced the problem to its basic elements - the same piece of code works in a standalone page, and does not work inside my application page.

Can you possibly point me to what I should look at here - I am stumped. Otherwise this seems like a showstopper to me - which would be a pity because CodeMirror is a really useful library.

5

I’d try removing CSS to see if that has an effect. And if it does, add it back piece by piece to figure out the problematic rule.