Question

So I have installed ckeditor on my project. The control loads fine and you are able to view it. The error occurs when you type something in the textarea. The ‘Next’ button doesn’t work. If there is no text in the textarea the ‘Next’ button works just fine. When there is text and you press the ‘Next’ button, I am also noticing these errors in the browser.

EDIT: Please note that the View here is a Partial View.

I am using ckeditor 3.6.4. I installed it using Nuget. I have the proper files that came with it.

In my _Shared/Layout Files I include the following:

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

In my View I have the following:

@using (Ajax.BeginForm("SomeAction", "SomeController", new { id = Model.Id}, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "dynamicData", InsertionMode = InsertionMode.Replace }))
        {
            <div class="grid_6">
                @Html.TextAreaFor(x => x.SomeText, new { @class = "someTextArea" })
            </div>

            <div class="grid_6 alpha omega">
                <input type="submit" value="Next" class="grid_6 alpha omega button drop_4 gravity_5" />
            </div>
        }

and in my javascript I have the following:

<script type="text/javascript">
    $(function () {
        ReBindCKEditor();
    });

    function BindCKEditor() {
        var elem = $('#SomeText');
        elem.ckeditor(function () { }, { toolbar: [
        ['Source'],
        ['Preview'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['Image', 'Table', 'HorizontalRule'],
        ['Styles', 'Format'],
        ['Bold', 'Italic', 'Strike'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
        ['Link', 'Unlink', 'Anchor']
        ]
        });
    }

    function ReBindCKEditor() {
        delete CKEDITOR.instances['SomeText'];
        BindCKEditor();
    }
</script>

Answer 1

Before submitting you need to update the hidden text fields ckeditor uses. This can be done with

for ( instance in CKEDITOR.instances )
    CKEDITOR.instances[instance].updateElement();

Say you wrap this in a javascript function called BeforeSubmittingCKEditor to follow your naming above, then you could add to your BeginForm the following hook

OnBegin = "BeforeSubmittingCKEditor"

so your AjaxOptions would look something like this:

new AjaxOptions { HttpMethod = "Post", 
                  UpdateTargetId = "dynamicData", 
                  InsertionMode = InsertionMode.Replace,
                  OnBegin = "BeforeSubmittingCKEditor" }