tinymce v4 jquery: how to catch onkeyup? - tinymce-4

Question

I'm trying to enable submit button when some form fields are filled. I've found a piece of javascript code that works, but I've a problem with textarea fiel which is tranformed by tinymce... How to catch it?
My html:
<form id="form_id1">
<fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />
</fieldset>
<input type="submit" value="Submit" />
</form>
My javascript:
$(document).ready(function()
{
$('#form_id1 input:submit').attr("disabled", true);
var textCounter = false;
$('#form_id1 input:text, #form_id1 textarea').keyup(check_submit);
function check_submit() {
$('#form_id1 input:text, #form_id1 textarea').each(function()
{
if ($(this).val().length == 0) {
textCounter = true;
return false;
}
else {
textCounter = false;
}
});
$('#form_id1 input:submit').attr("disabled", textCounter);
}
});
My tinymce init:
tinymce.init({
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
});
Thanks

Answer 1

In tinymce init add:
setup: function(ed) {
ed.on('keyup', function(e) {
console.log('Editor contents was modified. Contents: ' + ed.getContent());
check_submit();
});
}
Keep in mind you might need to find your editor instance rather than the textarea to get the actual value. If you made the textarea have id="textarea-tiny-mce"
tinymce.get('textarea-tiny-mce').getContent();

Answer 2

window.onload = function () {
tinymce.get('content').on('keyup',function(e){
console.log(this.getContent().replace(/(<[a-zA-Z\/][^<>]*>|\[([^\]]+)\])|(\s+)/ig,''));
});
}

Answer 3

tinymce.init({
setup: function (editor) {
editor.on('keyup', function (e) {
console.log(e);
//custom logic
});
}
});

Answer 4

Please make below changes in tinymce.init
tinymce.init({
selector: "textarea",
setup: function(editor) {
editor.on('keyup', function(e) {
console.log('edited. Contents: ' + editor.getContent());
check_submit();
});
}
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons",
});
See the below reference for more details.
https://www.tiny.cloud/docs/advanced/events/