отключить/включить кнопку с tinymce

Question

Я хочу отключить кнопку, когда нет содержимого в tinymce и кнопка включения, когда есть контент в tinymce. Я пробую так:

tinyMCE.init({ 
    // General options 
    mode: "specific_textareas", 
    editor_selector: "mceEditor" 
}); 

tinyMCE.triggerSave(); 
var hallo = $('#GeneratePDFMailFormSubmitter').val(); 
if ($.trim(hallo.value) == "") { 
    $('#btnGeneratePDFMailProductHandler').attr("disabled", true); 
} 
else 
    $('#btnGeneratePDFMailProductHandler').attr("disabled", false); 

Но при отсутствии контента кнопка все еще видна.

Спасибо

У меня сейчас так:

@section Scripts { 

    @Scripts.Render("~/bundles/xforms_" + StateHelper.GetCurrentCultureName()) 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript" src="~/js/tinymce/tinymce.min.js"></script> 
    <script type="text/javascript" src="~/js/MailMessage.js"></script> 

    <script> 
     var generatePdfPreviewUrl = "@Url.Action("GeneratePDFFromHtml", "Product")"; 

     (function ($) { 
      $(function() { 

       $("input.datepicker").each(function() { 
        var inp = $(this); 
        inp.datepicker({ 
         dateFormat: "@ViewHelper.GetJSLocaleDateFormat()", 
         onClose: function() { 
          $(this.form).validate().element(this); 
         } 
        }); 
       }); 
      }) 
     })(jQuery); 

     $(document).ready(function() { 
      tinymce.init({ 
       mode: "specific_textareas", 
       editor_selector: "mceEditor", 
       setup: function (ed) { 
        ed.on("keyup", function() { 
         onChangeHandler(ed); 
        }) 
       } 
      }); 



      function onChangeHandler(inst) { 
       tinymce.onChangeHandler(ed); 
       var editorContent = tinymce.get('GeneratePDFMailFormSubmitter').getContent(); 
       if ($.trim(editorContent) == '') { 
        alert(editorContent); 
        $('#btnGeneratePDFMailProductHandler').attr('disabled', true); 
       } else { 
        alert(editorContent); 
        $('#btnGeneratePDFMailProductHandler').attr('disabled', false); 
       } 
      } 
     }); 

    </script> 
} 

Но даже оленья кожа ударил функцию onChangeHandler (Ed) {

Answer 1

tinyMCE обеспечивает setup возможность обнаружения событий изменения в редактор, который можно реализовать следующим образом:

tinyMCE.init({ 
    mode : "specific_textareas", 
    editor_selector : "mceEditor", 
    setup: function (ed) { 
    ed.on("change", function() { 
     onChangeHandler(ed); //<-- This is our Handler 
     }) 
    } 
}); 

Теперь функция onChangeHandler будет вызываться каждый раз, когда изменяется содержимое редакции tinyMCE. Здесь вы можете проверить, пустой ли редактор или нет, и, таким образом, установите кнопку disabled или иным образом.

function onChangeHandler(inst) { 
    var editorContent = tinyMCE.get('myTextArea').getContent() 
    if ($.trim(editorContent) == '') { 
     $('#btnGeneratePDFMailProductHandler').attr('disabled', true); 
    } else { 
     $('#btnGeneratePDFMailProductHandler').attr('disabled', false); 
    } 
} 

Здесь работает DEMO

UPDATE

Как было отмечено, что change событие TinyMCE требует щелчок для запуска, мы можем использовать keyup для запуска обработчика событий:

setup: function (ed) { 
    ed.on('keyup', function(e) { 
     onChangeHandler(ed); 
    }); 
} 

Здесь находится информация о работе DEMO