disable/enable button with tinymce

Question

I want to disable button when there is no content in tinymce and enable button when there is content in tinymce. I try it like this:

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);

But when there is no content the button is still visible.

Thank you

I have it now like this:

@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>
}

But it even doesnt hit the function onChangeHandler(ed) {

Answer 1

tinyMCE provides setup option to detect change events in the editor, which you can implement like :

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

Now the function onChangeHandler will be called every time tinyMCE editor's contents are changed. That's where you can check if editor is empty or not and thus, set your button disabled or otherwise.

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

Here is the working DEMO

UPDATE

As it was observed that tinyMCE's change event requires a click to trigger, we can use keyup to trigger the event Handler :

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

Here is updated working DEMO