disable/enable 带有 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
        })
    }
});

现在每次 tinyMCE 编辑器的内容更改时都会调用函数 onChangeHandler。那是你可以检查编辑器是否为空的地方，因此，设置你的按钮 disabled 或其他。

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

这是工作DEMO

更新

观察到tinyMCE的change事件需要点击触发，我们可以使用keyup触发事件Handler:

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

这里是更新工作 DEMO

disable/enable 带有 tinymce 的按钮

disable/enable button with tinymce

javascript

jquery

tinymce