无法通过ajax使用CKEDITOR插入php数据

Question

我添加了 CKEDITOR（html 编辑器）来操作文本区域中的文本。我只尝试使用 php（没有 ajax），并且数据成功插入到数据库中。
问题是，当我使用 ajax 时，无法从 textarea 检索数据。更具体地说，除了包含 CKEDITOR 的文本区域中的数据外，所有数据都插入到数据库中。

到目前为止我尝试过的：

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 />

的内容。

引自本页：

请注意，替换的

<textarea>

元素会在提交前由 CKEditor 自动更新。如果您需要使用 JavaScript 以编程方式访问

<textarea>

值（例如，在 onsubmit 处理程序中验证输入的数据），则

<textarea>

元素仍有可能存储原始数据。为了更新替换的

<textarea>

的值，请使用

editor.updateElement()

方法。

您需要致电：

CKEDITOR.instances.subject.updateElement();

之后

e.preventDefault();

Answer 2

我在我的项目中测试了这段代码

CKEDITOR.instances.subject.updateElement();

，但没有解决我的问题。 在这个网址我找到了正确的答案：

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

如果我们在

event.preventDefault();

之后添加这段代码，问题就完全解决了。

Answer 3

你是对的。现在该由我来工作了，谢谢兄弟。