How to Enable/Disable button on TinyMCE textbox onkeyup or onkeydown

Question

on a ascx page I have a tinymce editor and a button

<asp:TextBox ID="txtName" runat="server" Width="100%" ></asp:TextBox>
<test:tinymceextender runat="server" ID="TinyMceExtender" TargetControlID="txtName" Theme="Full"> </test:tinymceextender>

<asp:Button ID="btnSave" Text="Save" Enabled="false" runat="server" />

I want to check if, textbox is null, then btnsave should be disable, if textbox is not null its should be enable, for the first time its working(because i am checking it on Page_Load), as I am entering some text and deleting that text using backspace btn is in enable mode only. I tried it to do with onKeyUp, onKeyPress but its working working for TinyMCE

these 2 js I used but its not working

$(document).ready(function () {
    document.getElementById('<%=btnSave.ClientID %>').disabled = true;
    var my_editor = tinymce.get('<%=txtName.ClientID %>');
    if ($(my_editor.getBody()).text() == '') {
        $("#<%=btnSave.ClientID %>").attr('disabled', 'disabled');
    }
    else if ($(my_editor.getBody()).text() != '') {
        $("#<%=btnSave.ClientID %>").removeAttr('disabled');
    }
});

---

window.onload = function () {
    document.getElementById('<%=btnSave.ClientID %>').disabled = true;
}
function ENABLE_BTN() {
    var EN = tinymce.get('<%=txtName.ClientID %>');
    if (EN == '') {
        document.getElementById('<%=btnSave.ClientID %>').disabled = true;
    } else {
        document.getElementById('<%=btnSave.ClientID %>').disabled = false;
    }
}

calling onkeydown="ENABLE_BTN() on txtName

on F12: my textbox code is looking something like this...

  <fieldset>

  <input id="BasePage_txtName" type="text" style="width: 100%; display: none;"  name="BasePage$txtName" aria-hidden="true">
  <span id="BasePage_txtName_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="BasePage_txtName_voice">
  <span id="BasePage_txtName_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
  <table id="BasePage_txtName_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 100px;">
  <tbody>
  <tr class="mceFirst" role="presentation">
  <tr class="mceLast">
 </tbody>
   </table>
  </span>
  </fieldset>

Answer 1

I would use the keyup event to check if the contents are empty like this. Edit: updated to use TinyMCE's weird eventhandler methods.

$(function () {

  tinyMCE.init({
    // adapt accordingly
    mode : "exact",
    theme : "simple",
    elements : "txtName", 
    setup : function(ed) {
               ed.onInit.add(function(ed) {
                     bindKeyUp(ed);
           });}
             });
});

function bindKeyUp(ed) {
 if (tinyMCE.activeEditor) {
    ed.onKeyUp.add(function() { 
      $('#btnSave').attr('disabled', !(textBoxEmpty()));
    });
 }
}

function textBoxEmpty() {
 var contentLength = tinyMCE.get('#txtName').getContent();
    if (contentLength.length) {
      return true;
    }
 return false;
}

Answer 2

$(function () {

 tinyMCE.init({
// adapt accordingly
mode : "exact",
theme : "simple",
elements : "txtName", 
setup : function(ed) {
           ed.onInit.add(function(ed) {
                 bindKeyUp(ed);
       });}
         });

});

function bindKeyUp(ed) {
    if (tinyMCE.activeEditor) {
        ed.onKeyUp.add(function () {
            var contentLength = removeHTMLTags(tinyMCE.get('<%=txtName.ClientID %>').getContent());
            if (contentLength.trim().length) {
                document.getElementById('<%=btnSave.ClientID %>').disabled = false;
            }
            else {
                document.getElementById('<%=btnSave.ClientID %>').disabled = true;

            }

        });
    }
}