MVC3 C# TextArea/CkEditor validation issue

Question

I have an MVC3 C# .Net Web App. We are using the ckEditor library to enhance the TextAreas in our app. When using a standard TextArea, the Validation operates correctly. However, in the enhanced TextAreas (implementing the ckEditor), when submitting the page, the Validation fires an error. "Description is Required" even when though there is data present in the TextArea. Upon a second click of the Submit, the form submits fine.

Domain class property:

[Display(Name = "Description")]
[Required(ErrorMessage = "Description is required.")]
public virtual string Description { get; set; }

HTML:

    <td style="border: 0;text-align:left " >
        @Html.TextAreaFor(model => model.Description,
            new
            {
                rows = 5,
                cols = 100,
                @class = "celltext2 save-alert"
            })
            @Html.ValidationMessageFor(model => model.Description)
    </td>

I think that applying the ckEditor attributes is messing it up somehow. Ideas?`

Let me clarify more. We have a .js file that queries the controls and then does ckEditor initialzation. when I remove the $(this).ckeditor({}) it works fine.

JS File:

$('textarea').each(function () {

    $(this).ckeditor({});

});

Answer 1

Something like this might work:

$('textarea').each(function () {
    var textarea = $(this);
    $(this).ckeditor({}).on('blur', function() {
        textarea.html( $(this).html() );
    });
});

EDIT(I've never used the jQuery adapter, after a small lesson I found this to work, the above the blur never fires and $(this).html() is not defined):

$('textarea').each(function () {
    var textarea = $(this);
    textarea.ckeditor(function () {
        textarea.ckeditorGet().on('blur', function () {
            textarea.html( this.getData() );
        });
    });
});

Answer 2

I think it's a little simpler than that. CKE creates an iframe that it is used instead of the actual textarea and you do correctly need to update the contents of the textarea with the data inside CKEditor before submitting. I would suggest, however, that you do this on submit instead of on blur. I would recommend setting an id to the relevant DOM elements but you get the idea.

// Replace textarea(s)
$('textarea').each(function () {
    $(this).ckeditor({});
});

// Bind on submit event to update the text
$('form').submit(function() {
    // Upate textarea value with the ckeditor data
    $('textarea').val(CKEDITOR.instances.ValueCKE.getData());
});