Question

In my MVC 3 app I am using CKeditor for editing rich text. Right now I need to be able to save text to DB with HTML tags.

Problem is that on my click of button ‘Save’ nothing happens.

Alert returns Undefined.

View:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        @Html.DropDownListFor(model=>model.Id, Model.Texts)  
        <div class="editor-field">
            @Html.TextAreaFor((model => model.Text), new { @Id = "editor1" })
            @Html.ValidationMessageFor(model => model.Text)
        </div> 
        <script type="text/javascript">
            CKEDITOR.replace('editor1');
            </script>

        <script type="text/javascript">
            var editor_data1 = $('editor1').val(); 
            var editor_data = editor_data1.getHtml();
            var url = '@Url.Action("EditText", "Admin")';
            var data = { commentText: editor_data };

            function Save() {
                alert(editor_data);
                $.post(url, data, function(result) {  

});

            };
            $('#Id').change(function () {
                var selectedText = $(this).val();
                if (selectedText != null && selectedText != '') {
                    $.getJSON('@Url.Action("Text","Admin")', { Id: selectedText }, function (text) {

//                        var textSelect = $('#Text');
//                        textSelect.empty();
//                        $("#Text")[0].value = text;
                        CKEDITOR.instances['editor1'].setData(text);
                        //                $.each(text, function (index, employee) {
                        //                    textSelect.append($('<option/>', {
                        //                        value: employee.Value,
                        //                        text: employee.Text
                        ////                    }));
                        //                });
                    });

                }
            });
</script>
    </fieldset>
     <p>
            <input type="button" value="Save"  onclick="Save()"/>
        </p>
} 

Answer 1

Try replacing:

var editor_data1 = $('editor1').val();

with:

var editor_data1 = $('#editor1').val();

in jQuery if you want to perform an id selector you should prefix it with #.

Also the .val() method that you are using returns a string. I am not aware with CKEditor but I very highly doubt that there is a getHtml on the string type.

You probably meant:

var editor_data = CKEDITOR.instances['editor1'].getData();

Also you seem to be subscribing to the change event of some DOM element with id="Id":

$('#Id').change(...);

I can’t see any such element in your DOM. Are you sure that you didn’t mean:

$('#editor1').change(...);

or some other element? Maybe the dropdown?

You seem to have some issues with the jQuery syntax. I would recommend you going through some tutorials.