Tinymce 插件没有获取要上传到数据库的 textarea 值

Posted 2023-05-07

【中文标题】Tinymce 插件没有获取要上传到数据库的 textarea 值

【英文标题】：Tinymce plugin not getting textarea value to upload in database

【发布时间】：2018-05-07 13:18:17

【问题描述】：

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

我在 textarea 编辑器中使用 tinymce 插件。当我提交数据时，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);
                
            
        )
    ); 
);

【问题讨论】：

TinyMCE textarea and post form using ajax的可能重复

您的 SQL 查询对 SQL 注入完全开放。使用Prepared Statements 而不是像那样连接您的查询。

出于好奇，您为什么将async 设置为false？

【参考方案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);
            
        
    )
);

【参考方案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();
      );
  
);