Asp.net mvc CKEditor和ASP.Net MVC 3 RequiredAttribute

我已经将CKEditor 3（以前的FCKEditor）集成到我的asp.net MVC（具体来说是v3）应用程序中。对于需要编辑器的字段，我的模型中有一个RequiredAttribute，但是客户端验证不能与CKEditor一起正常工作。当我尝试提交并且已将数据输入CKEditor时，所需的验证不会看到数据。如果我再次尝试重新提交，那么它会起作用。我在网上四处寻找，找不到解决办法。我还使用Jquery和Jquery适配器

---

我也尝试使用CKEditor，但没有成功。我一直在使用它（以及必需的属性），它对我来说很好

---

有没有想过尝试一下这个方法？

对我来说，这段代码可以做到这一点，它可能会被优化一点，但它可以工作：

$('#newsForm').submit(function (event) {
     var editor = $('#Body').ckeditorGet();
     editor.updateElement();
     $(this).validate().form();
});

因为我不知道提交运行的EventHandler的顺序，所以我确保更新值并刷新验证结果

编辑：更新的解决方案

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
        $('#Body').ckeditor();
        $('#newsForm').bind('submit', onFirstSubmit);
    });

    function onFirstSubmit(event) {
        var editor = $('#Body').ckeditorGet();
        editor.updateElement();
        $(this).validate().form();
        $(this).unbind('submit', onFirstSubmit).submit();
    }

    //]]>
</script>

//

如果有人正在寻找一种更通用的方法来实现这一点，您可以添加以下javascript：

    $(document).ready(function () {
    if ($('.text-editor')) {
        $('.text-editor').ckeditor();
        $('input[type=submit]').bind('click', function() {
            $('.text-editor').ckeditorGet().updateElement();
        });
    }
    });

并在textarea上使用.text编辑器css类，它可以正常工作

@Html.TextAreaFor(model => model.Description, new { @class = "text-editor" })

---

我觉得这个解决方案比另一个更简单，希望能有所帮助

我无法用上述解决方案修复它，但这对我来说很有效

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ckeditor/ckeditor.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        CKEDITOR.replace("activiteit_details", { toolbar: 'Basic' });
        CKEDITOR.replace("activiteit_verslag", { toolbar: 'Full' });


        // Bind CKeditor fields on submit (To avoid problems with the RequiredAttribute)
        $('input[type=submit]').bind('click', function () {

            var CKactiviteit_details = CKEDITOR.instances.activiteit_details.getData();
            $("#activiteit_details").val(CKactiviteit_details);

            var CKactiviteit_verslag = CKEDITOR.instances.activiteit_verslag.getData();
            $("#activiteit_verslag").val(CKactiviteit_verslag);
        });

    });


</script>


@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>

...

    <div class="editor-label">
        @Html.LabelFor(model => model.activiteit_details)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.activiteit_details)
        @Html.ValidationMessageFor(model => model.activiteit_details)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.activiteit_verslag)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.activiteit_verslag)

        @Html.ValidationMessageFor(model => model.activiteit_verslag)
    </div>

...
        <p>
            <input type="submit" value="Opslaan" />
        </p>
    </fieldset>

$（函数（）{
替换（“活动详细信息”{toolbar:'Basic'}）；
替换（“activiteit_verslag”，{toolbar:'Full'}）；
//提交时绑定CKeditor字段（以避免RequiredAttribute出现问题）
$（'input[type=submit]'）。绑定（'click'，函数（）{
var CKactiviteit_details=CKEDITOR.instances.activiteit_details.getData（）；
$（“活动详情”）.val（活动详情）；
var CKactiviteit_verslag=CKEDITOR.instances.activiteit_verslag.getData（）；
$（“#activiteit_verslag”）.val（CKactiviteit_verslag）；
});
});
@使用（Html.BeginForm（））
{
@Html.ValidationSummary（true）
...
@LabelFor（model=>model.activiteit_详细信息）
@Html.TextAreaFor（model=>model.activiteit_详细信息）
@Html.ValidationMessageFor（model=>model.activiteit_详细信息）
@LabelFor（model=>model.activiteit\u verslag）
@Html.TextAreaFor（model=>model.activiteit\u verslag）
@Html.ValidationMessageFor（model=>model.activiteit\u verslag）
...

如果不使用jQuery适配器，则更简单：

$(function () {
    $('input[type="submit"]').click(function () {
        CKEDITOR.instances.Body.updateElement();
    });
});

---

其中Body是textarea的ID。

我也遇到过同样的问题，但我无法解决，因为还有一个问题与之相关

当ckeditor替换textarea时，它将其隐藏，我发现jqueryvalidator的默认设置是使用“：hidden”选择器忽略隐藏的元素

为了解决这个问题，我必须更新隐藏选择器并更新元素值

$('#frmid').validate().settings.ignore = "input:hidden";
            $('input[type="submit"]').click(function () {
                $("#txtarea").val(CKEDITOR.instances["txtarea"].getData());
            });

谢谢你的回答。 多亏了这篇文章，我找到了自己的解决方案，非常适合我的情况

如果您不想使用click/mousedown事件，而是想在正确的表单提交事件上触发验证，那么可以使用以下方法

它既不使用jQuery适配器插件，也不使用click事件。 使用ckeditor可以将其应用于所有表单

$('form').on('submit.ckeditorValidation', function () {
    var $this = $(this);
    var $ckeditor = $this.find('textarea.ckeditor');

    // if no ckeditor for this form then do nothing
    if (!$ckeditor || !$ckeditor.length) {
        return true;
    }

    // update content from CKEditor to TextArea
    var textAreaId = $ckeditor.attr('id');
    CKEDITOR.instances[textAreaId].updateElement();

    // trigger validation and check if the form is valid
    if (!$this.valid()) {
        return false;
    }

    // if form is valid then
    // unsubscribe current event handler to avoid endless recursion
    // and re-trigger form submit
    $(this).off('submit.ckeditorValidation').submit();
    return true;
});

---

应该不太难解决。问题很可能是验证在CKEditor将文本传输到文本区域之前运行。我也有同样的问题。如果我有时间查看，我会发布解决方案。错误客户端错误消失了，但现在表单没有提交。忘了再次提交表单。抱歉。更新了答案嗯，我想我我已经开始工作了，但是有一些奇怪的问题我必须先研究。我会在工作结束后再研究。由于jquery validation 1.9，隐藏字段被忽略，所以必须将$.validator.setDefaults（{ignore:'}）；而不是放在$（document）中。准备好了吗