使用tinymce禁用/启用按钮_JavaScript

我想在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）函数{

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

这是工作中的

UPDATE

可以看到，tinyMCE的change事件需要单击才能触发，我们可以使用keyup触发事件Handler：

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

这是更新的工作

使用tinymce禁用/启用按钮

问题描述

1楼