Question

我已经包含了CKEDITOR（html编辑器）以便操作textarea中的文本。我只尝试使用php（没有ajax）并将数据成功插入到数据库中。
问题是，当我使用ajax时，无法从textarea检索数据。更具体的数据库中的所有数据插入除了包含CKEDITOR的textarea数据外。

这是我到目前为止所尝试的内容：

的 HTML

<form id='editClass' enctype="multipart/form-data">
  <label for="title"><div class='category_title theTitle'><p>Title</p></div>
  <textarea id='title' name='title' placeholder="Enter your title"></textarea>
</label>
<label for="subject"><div class='category_title theSubject'><p>Subject</p></div>
  <textarea id='subject' name='subject' placeholder="Enter your subject"></textarea> <!-- THE TEXTAREA THAT I HAVE INCLUDE THE CKEDITOR -->
</label>
  <br>
<label for='articlePicture'><div class='category_title thePicture'><p>Upload picture</p></div>
  <input type='file' id='articlePicture' name='articlePicture'>
</label>
<label for='articleVideo'><div class='category_title theVideo'><p>Upload video</p></div>
  <input type='file' id='articleVideo' name='articleVideo'>
</label>
  <br>
  <label for="category"><div class='category_title theCategory'><p>Category</p></div>
  <select id='category' name='category'>
    <option value=''>Choose category</option>
    <option value='literature'>Literature</option>
    <option value='poetry'>Poetry</option>
    <option value='music'>Music</option>
    <option value='cinema'>Cinema</option>
    <option value='beauty'>Beauty</option>
  </select>
</label>
<p>must read</p><input type='checkbox' value='true' id='must' name='must'>
  <input type='hidden' id='articleDate' name='articleDate' value="<?php echo date('Y-m-d H:i:s'); ?>">
  <input type='hidden' id='postArticle' name='postArticle' value='create'>
  <button type='submit' id='post_btn' name='post_btn'>Post article</button>
</form>

<script>
CKEDITOR.replace('subject');
</script>

AJAX

我使用FormData对象来包含文件。

$("#editClass").on('submit', function(e) {
  e.preventDefault();
  var form_data = new FormData(this);

  $.ajax({
    url: '../controls/handlers.php',
    type: 'POST',
    data: form_data,
    datatype: "text",
    contentType: false,
    cache: false,
    processData: false,
    beforeSend: function() {
      $("#post_btn").attr("disabled", true);
      $("#post_btn").html("Please wait...");
    },
    success: function(response) {
      alert(response);
      window.location.href = 'blog_oop_index.php';
      $("#post_btn").attr("disabled", false);
      $("#post_btn").html("Post");
    }
  });
});

PHP

if(input::get('postArticle') == 'create') {

  $validate = new validate();
  $validation = $validate->check($_POST, $items = array(
    'title' => array(
      'required' => true,
      'min' => 5,
      'max' => 300
    ),

    'category' => array(
      'required' => true
    )
  ));
if(!$validate->isPassed()) {
  foreach ($validate->errors() as $error) {
    echo $error;
  }
}
  // new version
  if($validate->isPassed()) {
    $files = new files();
    $session_username = $_SESSION['username'];
    $picture = $_FILES['articlePicture'];
    $video = $_FILES['articleVideo'];
    if(empty($picture['name'])) {
      $picture_location = null;
    }
    if(empty($video['name'])) {
      $video_location = null;
    }
    if(!empty($picture['name'])) {
      $files->checkPicture($picture);
      if(!$files->isPassed()) {
        // error picture
        foreach($files->getError() as $error) {
          echo "<p>$error</p>";
        }
      } elseif($files->isPassed()) {
        $picture_name = $picture['name'];
        $picture_tmp = $picture['tmp_name'];
        $picture_explode = explode('.', $picture_name);
        $picture_extension = strtolower(end($picture_explode));
        $random_picture_name = $session_username.rand(0, 9999).rand(0, 9999).'.'.$picture_extension;
        $picture_location = "../media/articlesImages/".$random_picture_name;
        move_uploaded_file($picture_tmp, $picture_location);
      }
    }
    if(!empty($video['name'])) {
      $files->checkVideo($video);
      if(!$files->isPassed()) {
        // error video
        foreach($files->getError() as $error) {
          echo "<p>$error</p>";
        }
      } elseif($files->isPassed()) {
        $video_name = $video['name'];
        $video_tmp = $video['tmp_name'];
        $video_explode = explode('.', $video_name);
        $video_extension = strtolower(end($video_explode));
        $random_video_name = $session_username.rand(0, 9999).rand(0,9999).'.'.$video_extension;
        $video_location = "../media/articlesVideosImages/".$random_video_name;
        move_uploaded_file($video_tmp, $video_location);
      }
    }
    if(input::get('must') == 'true') {
      $must = 'true';
    } else {
      $must = 'false';
    }
    //insert article

    $article = new articles();
    $article->create('articles', array(
      'title' => input::get('title'),
      'subject' => input::get('subject'),
      'articlePicture' => $picture_location,
      'articleDate' => input::get('articleDate'),
      'category' => input::get('category'),
      'articleVideo' => $video_location,
      'commentsCount' => 0,
      'must_read' => $must
    ));

  }
}

当然，您在上面见过的input, articles, validate这些课程中的任何一个都很完美。
所以，我认为PHP工作正常，CKEDITOR的问题在于ajax。有任何想法吗？

Answer 1

我相信当您致电e.preventDefault();时，您会阻止CKEditor自动更新<textarea />的内容。

引自this page：

请注意，替换后的<textarea>元素会在提交前由CKEditor自动更新。如果您需要使用JavaScript以编程方式访问<textarea>值（例如，在onsubmit处理程序中验证输入的数据），<textarea>元素仍有可能存储原始数据。要更新已替换的<textarea>的值，请使用editor.updateElement()方法。

您需要致电：

CKEDITOR.instances.subject.updateElement();

在e.preventDefault();

之后

Answer 2

我在项目中测试了这段代码CKEDITOR.instances.subject.updateElement();，但没有解决我的问题。在this URL中，我找到了正确的答案：

 CKEDITOR.instances['editor1'].updateElement();//CKEditor  bilgileri  aktarıyor

如果我们将此代码添加到event.preventDefault();之后，问题将完全解决。

无法通过ajax

2 个答案: