Question

我想在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

<强>更新

由于观察到tinyMCE的change事件需要点击才能触发，我们可以使用keyup来触发事件处理程序：

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

此处已更新 DEMO

使用tinymce禁用/启用按钮

1 个答案: