无法在 asp mvc 中验证 TinyMCE答案

【问题标题】：Can't validate TinyMCE in asp mvc无法在 asp mvc 中验证 TinyMCE
【发布时间】：2012-07-22 15:47:06
【问题描述】：

我有一个使用不显眼验证的表单。最近我已将文本区域更改为使用 tiny mce，但现在验证不起作用。
我尝试使用here 的解决方案，但没有任何反应。

$('#form input[type=submit]').click(function () {

从不执行。这是我所拥有的：

@using (Html.BeginForm("Create", "UserAd", FormMethod.Post))
{
...
@Html.TextAreaFor(x => x.Description, new { id = "description" })        
...
<input type="submit" value="Create"/>
...

这是JS代码：

$(document).ready(function () {

        tinyMCE.init({
            mode: "textareas",
            theme: "advanced",
            skin: "o2k7",
            height: "250",
            plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",


            theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist",
            theme_advanced_buttons2: "",
            theme_advanced_buttons3: "",
            theme_advanced_buttons4: "",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_resizing: false
        });

        function toggleEditor(id) {
            if (!tinyMCE.get(id)) {
                tinyMCE.execCommand('mceAddControl', false, id);
            }
            else {
                tinyMCE.execCommand('mceRemoveControl', false, id);
            }
        }


        // new
        $(function () {
            var tinymce = $('#Description');

            tinymce.tinymce({
                setup: function (e) {
                    e.onInit.add(function () {
                        tinymce.css({
                            position: 'absolute',
                            height: 0,
                            width: 0,
                            top: -100
                        }).show();
                    });
                }
            });

            $('#form input[type=submit]').click(function () {
                alert('ss');
                tinyMCE.triggerSave();
            });
        });
        // makes form field highlighting work with bootstrap's css
        $.validator.setDefaults({
            highlight: function (element, errorClass, validClass) {
                $(element).closest('.control-group').addClass('error');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).closest('.control-group').removeClass('error');
            }

        });
        $(function () {
            // makes form field highlighting work with bootstrap's css on post backs
            $('.input-validation-error').each(function (i, element) {
                $(element).closest('.control-group').not('.error').addClass('error');
            });
        });

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-validate tinymce

【解决方案1】：

您在选择器中指定了“#form”的 ID。尝试从选择器中删除 #。

E.G，

$('form input[type=submit]').click(function () {
      alert('ss');
      tinyMCE.triggerSave();
});

另外，如果我没看错，tinyMCE 是一个动态元素。您可能希望将点击事件与 on 函数绑定。

E.G，

$("body").on("click","#yourFormID", function(e){
    your click stuff here
}

【讨论】：

您的表单 ID 是什么？请参阅我的更新答案。这可能是因为您的元素是动态的，请按照我的示例尝试为您的点击处理程序使用 on() 函数。
我将 id 添加到表单和此功能，但再次没有运气:(
萤火虫有什么错误吗？您能否验证 ID 是否在 DOM 中的表单上？
当我在控制台中使用此表单在页面上运行应用程序时，我收到此错误：未捕获类型错误：对象 [对象对象] 没有方法 'tinymce' 在代码中它只是下面的 '//new'
啊，看来你的外壳没了。尝试这个。 tinyMCE.tinymce 而不是您那里的 tinymce.tinymce。

【解决方案2】：

你得到的错误正是它所说的。你需要在 jQuery 之前加载 Tiny MCE（不是插件，真正的交易）。这可能是问题所在。

你能检查一下 tiny_mce.js 是否真的被下载了吗？您可能还想查看this blog。它来自对 Tiny MCE 也有问题的人。

【讨论】：

【解决方案3】：

由于在应用 tinyMce 插件后 TextArea 被隐藏，并且由于默认隐藏文件未验证，因此您需要更改此默认值。您是否已经尝试添加：

$.validator.setDefaults({
ignore: ''

});

【讨论】：

我试过了，但什么也没有，我所做的任何微小的 mce 文本区域都没有得到验证

【解决方案4】：

已经有几个针对这个问题的 stackoverflow 问题可以解决这个问题。看看这里

【讨论】：