如何将带contenteditable属性的div内数据提交到PHP数据表

问题原因 #

• 原生表单仅会自动提交 <input>、<textarea>、<select> 这类标准表单控件的值，contenteditable="true" 的普通 div 不属于表单控件，其内容不会被表单默认识别提交
• 你预留的 id 为 input 的隐藏表单字段未被赋值，提交时始终是空值，因此后端只能接收到空的 publicar 参数

解决方法 #

你需要监听表单的提交事件，在表单提交前把可编辑区域的内容同步到隐藏 input 中再提交，参考实现代码如下：

// 获取相关DOM元素
const submitForm = document.querySelector('form[action="../logica/insertPost.php"]');
const editableArea = document.querySelector('.editable');
const hiddenInput = document.getElementById('input');
const placeholderText = document.getElementById('span-hidden').innerText.trim();

submitForm.addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault();

  // 提取可编辑区域内容，过滤占位符和首尾空格
  let publishContent = editableArea.innerText.trim();
  if (publishContent === placeholderText) {
    publishContent = '';
  }

  // 内容同步到隐藏表单字段
  hiddenInput.value = publishContent;

  // 手动提交表单
  this.submit();
});

优化建议 #

• 如果不需要保存富文本格式，优先使用 innerText 提取纯文本内容，降低XSS注入风险
• 可新增非空校验逻辑，避免用户提交无意义的空内容
• 给可编辑区域新增 focus、blur 事件监听，实现用户点击时自动清空占位符、失焦无内容时恢复占位符的交互效果
• 建议给 form 标签添加 method="POST" 属性，默认GET方法存在参数长度限制，容易导致长内容被截断，也更符合数据提交的规范

内容的提问来源于stack exchange，提问作者Julián Ontiveros Ramírez