如何通过 AJAX 将 CKEDITOR 值与其他输入一起发布

Question

我在我的 asp.net 核心项目中有一个部分视图，我想使用 AJAX 将所有 input 和 select 和 editor 值发布到控制器。 我可以将所有 input 和 select 标签发布到控制器，但不能发布 CkEditor 值。

当然我可以在jQuery中获取CkEditor的值，但是不能选择它。

局部视图：

@model LibraryProject.Models.ViewModels.AddEditBookViewModel

<form method="post" enctype="multipart/form-data">
    <div class="modal-body form-horizontal">
        <div class="row">

            <div class="form-group">
                <label asp-for="BookName" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="BookName" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label asp-for="BookDescription" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-9">
                    <textarea id="BookDescription" name="BookDescription" asp-for="BookDescription" class="form-control"></textarea>
                </div>

                <script type="text/javascript">
                    CKEDITOR.replace('BookDescription');
                </script>

            </div>


            <div class="form-group">
                <label asp-for="BookGroupID" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <select asp-for="BookGroupID" asp-items="@Model.BookGroups" class="form-control"></select>
                </div>
            </div>


            <div class="form-group">
                <label asp-for="AuthorID" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <select asp-for="AuthorID" asp-items="@Model.Authors" class="form-control"></select>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="BookPageCount" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="BookPageCount" class="form-control" />
                </div>
            </div>

            <input type="file" id="files" name="files" multiple />

        </div>
    </div>
    <div class="modal-footer">
        <input type="button" id="submitinfo" class="btn btn-success" value="Add Book" />
    </div>
</form>

还有我的 jQuery 代码：

 <script>
    $(document).on('click', '#submitinfo', function (evt) {
        evt.preventDefault();
        var fileupload = $("#files").get(0);
        var files = fileupload.files;
        var data = new FormData();
        for (var i = 0; i < files.length; i++) {
            data.append('files', files[i]);
        }

//In this line I can get editor value
        var editorval = CKEDITOR.instances['BookDescription'].getData();

//***here i can post all input and select tag value but can`t post editor value along with other
        $('input,select').each(function (x, y) {
            data.append($(y).attr("name"), $(y).val());
        });


        $.ajax({
            type: "post",
            url: '@Url.Action("AddBook", "Book")',
            contentType: false,
            processData: false,
            data: data
        }).done(function (res) {
            if (res.status === "success") {
                alert(res.message);
            } else {
                $.each(res.errors, function (a, b) {
                    alert(b);
                });
            }
        }).fail(function (xhr, b, error) {
            alert(error);
        });
    });
</script>

现在如何在 jQuery 代码中将编辑器值与其他标记为 3 星的位置一起发布？

Answer 1

您可以从 CKEditor 读取值并将其添加到表单数据中。

$('input,select').each(function (x, y) {
     data.append($(y).attr("name"), $(y).val());
});
var editorval = CKEDITOR.instances['BookDescription'].getData();
data.append('BookDescription',editorval);