How to enable / disable a button in the TinyMCE onkeyup or onkeydown text box

Question

on the 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 the textbox is null, then btnsave should be disabled, if the text field is not null, it should be turned on, the first time it works (because I check it on the_Load page), as I enter some text and delete of this text using backspace btn in resolution mode only. I tried this with onKeyUp, onKeyPress, but its working for TinyMCE

these 2 js i used but didn't work

 $(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; } } 

call onkeydown = "ENABLE_BTN () on txtName

on F12: my text code code looks 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 this content is empty. Edit: Updated to use the TinyMCE 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; } }); } }