Tinymce插件未获取要上传到数据库中的textarea值

Question

我正在尝试上传数据库中的数据。

我将tinymce插件用于textarea编辑器。 当我提交数据时，textarea值会上传空文本。 请在下面找到前端和后端代码。

前端代码：

<form id="upload" enctype="multipart/form-data" method="post">
<textarea class="tinymce" name="product_tip" id="product_tip" placeholder="" col="5"></textarea>
<input type="button" name="submit" value="Submit" class="upload-btn"/>
</form>

后端代码：

<?php
    $product_tip=$_POST["product_tip"];
    if(empty($product_tip)) {
        echo "<div class='alert alert-danger'>Please enter Product tips.</div>";
    }
    else{
        $result=mysqli_query($conn, "INSERT INTO product(tip) VALUES ('$product_tip')")or die("Could not retrieve image: " .mysqli_error($conn));
        echo 1;
    }
?>

这是我的前端和后端文件的连接代码。

$(document).ready(function(){         
    $('.upload-btn').click(function(){

        var formdata=new FormData($('#upload')[0]);
        $.ajax({
                url:'includes/backend_product_upload.php',
                method: "POST",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                data : formdata,
            success:function(answer_from_actionpage){
                if(answer_from_actionpage == 1){
                    $('.error').html("<div class='alert alert-success'>Successfully Product Upload</div>");
                    //$('.form-control').val("");
                }else{
                    $('.error').html(answer_from_actionpage);
                }
            }
        })
    }); 
});

Answer 1

添加tinyMCE.triggerSave(); 在这样的连接文件中-

$('.upload-btn').click(function(){
    tinyMCE.triggerSave();
    var formdata=new FormData($('#upload')[0]);
    $.ajax({
        url:'includes/backend_product_upload.php',
        method: "POST",
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        data : formdata,
        success:function(answer_from_actionpage){
            if(answer_from_actionpage == 1){
                $('.error').html("<div class='alert alert-success'>Successfully Product Upload</div>");
                //$('.form-control').val("");
            }else{
                $('.error').html(answer_from_actionpage);
            }
        }
    })
});

Answer 2

默认情况下，通过标准HTML表单提交表单时，TinyMCE将自动更新基础<textarea> 。 这是TinyMCE中的内置行为，因为大多数应用程序不需要保持<textarea>持续同步的开销。

如果您不依赖标准的HTML表单提交事件，则有两种选择...

当您开始AJAX表单提交过程时：

TinyMCE具有triggerSave()方法，该方法强制编辑器立即与<textarea>同步。

https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave

当用户想要提交表单然后执行验证时，可以首先调用triggerSave() 。

TinyMCE活动：

正如您对自己的问题的回答所示，您当然可以依赖各种编辑器事件，以通过triggerSave()方法将编辑器同步到<textarea> 。 对此没有任何技术问题，只是知道如果您依赖于诸如change事件之类的事件，则可能会触发大量此类事件。 如果您有大型/复杂的HTML内容，或者一页上的许多编辑器不断与基础<textarea>同步，则可能会影响浏览器的性能。

哪个更好？

如果您不需要实时验证内容...仅在AJAX提交过程开始时调用triggerSave()可能会更容易（不需要将TinyMCE配置代码与事件绑定在一起），并且会减少浏览器的开销。

如果您确实需要实时验证内容...使用诸如change事件之类的事件来同步<textarea>是更好的解决方案。 它可能看起来像这样：

tinymce.init({
  selector: "#myTextarea",
  ...
  setup: function (editor) {
      editor.on('change', function () {
          tinymce.triggerSave();
      });
  }
});