Question

我已将CKEditor 3（以前称为FCKEditor）集成到我的asp.net MVC（v3为特定）应用程序中。我的模型中有一个RequiredAttribute用于需要编辑器的字段，但客户端验证与CKEditor无法正常工作。当我尝试提交并且我已将数据输入CKEditor时，所需的验证不会看到数据。如果我再次尝试重新提交，那么它可以正常工作。我在网上环顾四周，无法找到解决方案。我也在使用Jquery并使用Jquery适配器

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter

Answer 1

如果有人正在寻找更通用的方法来执行此操作，您可以添加此javascript：

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

在textarea上使用.text-editor css类，它可以正常工作。

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

我发现这个解决方案比其他解决方案更有效，希望它能有所帮助！

Answer 2

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

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

Body是textarea的ID。

Answer 3

对我来说，这个代码可以解决这个问题，它可能会稍微优化一下，但它可以工作：

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

因为我不知道提交的事件处理程序的运行顺序，所以我确保更新该值并刷新验证结果。

编辑：更新的解决方案

<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>

Answer 4

我无法通过上述解决方案解决这个问题，但这对我有用;

<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>

Answer 5

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

有没有想过尝试过这个？

Answer 6

感谢您的回答。感谢这篇文章，我找到了适合我案例的自己的解决方案。

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

它既不使用jQuery-Adapter CKEditor插件也不使用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;
});

Answer 7

我遇到了同样的问题，由于还有一个与之相关的问题，我无法解决它。

当ckeditor替换textarea时，它会隐藏它，我发现jquery验证器的默认设置是忽略带有“：hidden”选择器的隐藏元素。

要解决此问题，我必须更新隐藏的选择器并更新元素值。这是我的代码，它在文档就绪事件中执行此操作，现在正在运行

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

CKEditor和ASP.Net MVC 3 RequiredAttribute

7 个答案: