I am using my text editor as codemirror. Normally when I try to use dom event like onmouseup, onchange, oninput
in textarea it works, but after integrating the codemirror, it is not working. Please tell me the correct way to invoke these events in my text editor.
Without codemirror, it works.
<textarea id="editor" rows="30" cols="100" onchange="myFunction()" onmouseup="second();"></textarea>
<div id="demo"></div>
<div id="second"></div>
<script>
function myFunction() {
document.getElementById('demo').innerHTML="The onchange function..";}
function second() {
document.getElementById('second').innerHTML="The mouseup function..";}
</script>
On integrating codemirror text editor, it is not working. Here is a code:
<textarea id="editor" onchange="myFunction()" onmouseup="second();"></textarea>
<div id="demo"></div>
<div id="second"></div>
<script>
var editor = CodeMirror.fromTextArea
(document.getElementById('editor'),{
mode:"text/x-java",
lineNumbers:true,
autoCloseTags:true,
tabSize:5
});
editor.setSize("1000", "450");
</script>
<script>
function myFunction() {
document.getElementById('demo').innerHTML="The onchange function..";}
function second() {
document.getElementById('second').innerHTML="The mouseup function..";}
</script>
Because those events are not actually taking place on the textarea since it is hidden, rather, you will need to bind the events to the .CodeMirror
element like so:
$(document).on('mouseup', '.CodeMirror', function() {
// do something...
});
$(document).on('change', '.CodeMirror', function() {
// do something...
});
Also, I use keyup
rather than a change
event because you have to click out of the .CodeMirror
to make the change function run...