php - ckeditor textarea 的内容不通过 Ajax Jquery 发送

Question

我有一个带有输入和文本区域 (ckeditor) 的表单，在使用 ajax 提交表单后，除了 CKEDITOR textarea 之外，所有输入字段的值都被发送到数据库表，我不明白为什么!

我在这里尝试了一些问题的解决方案，但没有解决问题!

HTML 部分

<form id="submitForm">
... some inputs ...

<textarea class="form-control" name="details" rows="6" id="product-details"></textarea>

<button class="btn btn-solid btn-rounded" id='publish' type="submit"> SAVE </button>

</form>

JS部分

$(document).ready(function() {
                       
    ClassicEditor.create( document.querySelector("#product-details"), {
        toolbar: {
            items: [
                "heading", "|",
                "alignment", "|",
                "bold", "italic", "strikethrough", "underline", "subscript", "superscript", "|",
                "link", "|",
                "bulletedList", "numberedList", "todoList",
                "-", // break point
                "fontfamily", "fontsize", "fontColor", "fontBackgroundColor", "|",
                "code", "codeBlock", "|",
                "insertTable", "|",
                "outdent", "indent", "|",
                "uploadImage", "blockQuote", "|",
                "undo", "redo"
            ],
            shouldNotGroupWhenFull: false
        }
    });

$("#submitForm").on('submit', function(e) {
        e.preventDefault();
        
        $.ajax({
            type: 'POST',
            url: 'ajax/create-product.php',
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            beforeSend: function() {
                $("#publish").prop("disabled", true);
            },
            success: function(response) {                
                if (response.status == '1') {
                    Command: toastr["success"](response.message, "")
                    window.location.href = response.url;
                
                } else {
                    $("#publish").prop("disabled", false);
                    Command: toastr["error"](response.message, "")
                }
            }
        });
    });   
});

Answer 1

它不起作用，因为编辑器的值没有直接暴露给下面的文本区域。我认为有一些选择，但这也可以:在提交到隐藏控件时复制值。

var instance;

$(document).ready(function() {

  ClassicEditor.create(document.querySelector("#product-details")).then(editor => instance = editor);

  $("#submitForm").on('submit', function(e) {
    e.preventDefault();

    document.querySelector("[name=details").value = instance.getData();

    $.ajax({
      type: 'POST',
      url: 'ajax/create-product.php',
      data: new FormData(this),
      dataType: 'json',
      contentType: false,
      cache: false,
      processData: false,
      beforeSend: function() {
        $("#publish").prop("disabled", true);
      },
      success: function(response) {
        if (response.status == '1') {
          Command: toastr["success"](response.message, "")
          window.location.href = response.url;

        }
        else {
          $("#publish").prop("disabled", false);
          Command: toastr["error"](response.message, "")
        }
      }
    });
  });
});

textarea {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>

<form id="submitForm">
  <textarea class="form-control" name="details-editor" rows="6" id="product-details"></textarea>

  <p>this textarea should be hidden:</p>
  <textarea name="details"></textarea>

  <button class="btn btn-solid btn-rounded" id='publish' type="submit"> SAVE </button>

</form>