如何通过富文本编辑器使用JavaScript与PHP插入带HTML标签的编码数据到数据库

问题原因&修复方案 #

富文本标签丢失的核心常见原因按优先级排查修改如下：

1. 富文本内容未同步到原生textarea
   tinymce/ckeditor默认使用独立的编辑层，提交表单前需要手动把编辑好的带标签内容同步到绑定的textarea标签，你当前的JS提交逻辑没有做这一步，导致提交的是无标签的纯文本或者空的textarea原始值。
   修改JS代码如下：

$('#dataBtn').click(function(){
    // 新增：同步所有tinymce实例内容到对应的textarea
    tinymce.triggerSave();
    // 如果使用ckeditor，替换上面的同步代码为：
    // for (let instance in CKEDITOR.instances) CKEDITOR.instances[instance].updateElement();
    $.post(
    $('#dataForm').attr('action'),
    $('#dataForm').serializeArray(),
        function(result) {
            $('#dataResult').html(result);
        }
    );
    // 新增：阻止表单默认提交行为，避免重复提交
    return false;
});

2. PHP端存在HTML标签过滤逻辑
   检查你的项目全局或者当前页面有没有自动调用strip_tags()、全局XSS过滤函数处理POST参数，如果有，需要对details字段单独放开过滤规则，不要剥离HTML标签。

3. SQL拼接语法错误导致内容截断
   你当前的SQL是直接拼接用户输入的字符串，一旦富文本内容里存在单引号'，就会破坏SQL语法结构，导致内容被截断甚至存在注入风险，这也是标签丢失的高频原因。必须改为预处理语句执行，示例修改如下：

$details = $_POST['details'];

$flag  = false;
$error = [];
$valid = [];

if (!empty($details)) {
    $flag = true;
} else {
    $error[] = "请填写详情内容！";
    $flag    = false;
}

if ($flag == true) {
    // 改用预处理语句绑定参数，避免注入和语法错误
    $query  = "INSERT INTO tbl_post(details)VALUES(?)";
    // 按你的$db类实际支持的预处理方法调整即可，核心是不要直接拼接$details到SQL语句
    $stmt = $db->prepare($query);
    $stmt->bind_param('s', $details);
    $result = $stmt->execute();

    if ($result) {
        $valid[] = "数据添加成功！";
    } else {
        $error[] = "操作失败，请稍后重试！";
    }

} else {
    $error[] = "操作出现异常！";
}

4. 额外排查项
   确认数据库details字段的类型为text或者longtext，如果是短长度的varchar会导致内容过长被自动截断，丢失标签和内容。

后续安全提示 #

存储带HTML的内容到数据库后，后续输出到前端页面时，需要做XSS过滤，拦截<script>、<iframe>等危险标签，避免恶意脚本执行。

内容的提问来源于stack exchange，提问作者Bearded