CKEDITOR - 在 Laravel 5 中使用 AJAX 更新/创建产品失败

Question

我想使用 AJAX 将 ckeditor textarea 字段中写入的 html 内容存储在名为 products 的数据库表中。

一切都被成功插入和/或更新，留下产品描述。

product_edit.blade.php

{!! Form::open(['files' => 'true', 'autocomplete' => 'off', 'name' => 'formEditProductGeneralInfo', 'id' => 'formEditProductGeneralInfo']) !!}
    <div class="form-group">
        {!! Form::label('code', 'Code:') !!}
        {!! Form::text('code', $product->code, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('name', 'Name:') !!}
        {!! Form::text('name', $product->name, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('description', 'Product Description:') !!}
        {!! Form::textarea('description', $product->description, ['class' => 'form-control input-sm ckeditor', 'rows' => 3, 'id' => 'prdDescription']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('price', 'Price:') !!}
        {!! Form::text('price', $product->price, ['class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
       {!! Form::label('image_file', 'Image:') !!}
       {!! Form::file('image_file', ['id' => 'image_file', 'class' => 'form-control input-sm']) !!}
    </div>

    <div class="form-group">
       {!! Form::submit( 'Update', ['class' => 'btn btn-primary btn-block', 'id' => 'btnEditProductGeneral'] ) !!}
    </div>
{!! Form::close() !!}

ajax

$('form[name="formEditProductGeneralInfo"]').submit(function(e) {
    var inputData = new FormData($(this)[0]);

    var message = CKEDITOR.instances.prdDescription.getData();

    console.log(message);
    console.log(inputData);

    $.ajax({
        url: '{{ url(' / admin / products / update / general ', $product->id) }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function(m) {
            if (m.status === 'success') {
                toastr.success(m.msg, 'Successs!');
            } else {
                toastr.error(m.msg, msg.status);
            }
        },
        error: function(data) {
            if (data.status === 422) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each(errors, function(key, value) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $('.errors').html(errorsHtml);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    e.preventDefault();
    return false;
});

我应该如何将description 的 html 内容保存在数据库中？

非常感谢任何帮助。谢谢。

Answer 1

我已经解决了。问题是我必须在for loop 中检查我没有检查过的CKEDITOR 实例。所以我添加了for loop 来检查实例，一切正常。

ajax 更新：

$('form[name="formEditProductGeneralInfo"]').submit(function(e) {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }

    var inputData = new FormData($(this)[0]);

    $.ajax({
        url: '{{ url(' / admin / products / update / general ', $product->id) }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function(m) {
            if (m.status === 'success') {
                toastr.success(m.msg, 'Successs!');
            } else {
                toastr.error(m.msg, msg.status);
            }
        },
        error: function(data) {
            if (data.status === 422) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each(errors, function(key, value) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $('.errors').html(errorsHtml);
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    e.preventDefault();
    return false;
});

Answer 2

使用 AJAX 请求发送 var 消息。然后在您的控制器中检查并保存。 :)