PHP页面中iframe嵌入WYSIWYG编辑器，表单提交无法取值的解决方法

我帮你梳理下问题根源：你的编辑器放在独立的iframe里，主表单没法直接读取iframe内部的内容，而且编辑器本身也没有绑定到可以被表单提交的输入字段上。下面是具体的修复步骤：

1. 修复WYSIWYG.php的代码 #

首先补全页面的闭合标签，同时添加获取编辑器内容的函数，确保能正确读取编辑器的HTML或源码内容：

<html>
<head>
<title>WYSIWYG Editor</title>
<script>
var showingSourceCode = false;
var isInEditMode = true;

// 初始化设计模式
function enableDesignMode() {
  const editorFrame = window.frames['ritchTextFiled'];
  editorFrame.document.designMode = 'on';
  // 初始化编辑器内容为空（可选）
  editorFrame.document.body.innerHTML = '';
}

// 执行无参数的编辑命令
function exeCmd(command) {
  const editorFrame = window.frames['ritchTextFiled'];
  editorFrame.document.execCommand(command, null, false);
}

// 执行带参数的编辑命令
function execCommandWithArg(command, arg) {
  const editorFrame = window.frames['ritchTextFiled'];
  editorFrame.document.execCommand(command, null, arg);
}

// 切换源码/可视化模式
function toggleSource() {
  const editorFrame = window.frames['ritchTextFiled'];
  const body = editorFrame.document.body;
  if (showingSourceCode) {
    body.innerHTML = body.textContent;
    showingSourceCode = false;
  } else {
    body.textContent = body.innerHTML;
    showingSourceCode = true;
  }
}

// 切换编辑/只读模式
function toggleEdit() {
  const editorFrame = window.frames['ritchTextFiled'];
  if (isInEditMode) {
    editorFrame.document.designMode = 'off';
    isInEditMode = false;
  } else {
    editorFrame.document.designMode = 'on';
    isInEditMode = true;
  }
}

// 新增：获取编辑器内容的函数，供主页面调用
function getEditorContent() {
  const editorFrame = window.frames['ritchTextFiled'];
  if (!editorFrame || !editorFrame.document) return '';
  const body = editorFrame.document.body;
  return showingSourceCode ? body.textContent : body.innerHTML;
}
</script>
</head>
<body onload="enableDesignMode();" style="width: 628px;">
<button onclick="toggleSource();"><b>&lt;/&gt;</b></button>
<button onclick="exeCmd('bold');"><b>B</b></button>
<iframe name="ritchTextFiled" style="width: 100%;height: 300px;border: 1px solid #2b9ff6; box-shadow: 0 4px 8px 0 rgba(42, 53, 71, 0.2), 0 6px 20px 0 rgba(42, 53, 71, 0.19);"></iframe>
</body>
</html>

2. 修改主表单页面（ntopic.php） #

在主表单里添加一个隐藏的文本域，用来存储编辑器内容；然后添加提交事件，在表单提交前从iframe中读取编辑器内容并填充到隐藏域：

<?php
if(is_post_request()) {
    // Create record using post parameters
    $args= $_POST['topic'];
    $topic = new Topic($args);
    $result = $topic->save();
    if($result === true) {
        $session->message('The Topic was created successfully.');
        redirect_to(url_for("topic.php"));
    } else {
        // show errors
        $session->message('The Topic was created Error.');
        redirect_to(url_for("topic.php"));
    }
} else {
}
?>
<form action="<?php echo url_for('ntopic.php'); ?>" method="post" id="topicForm">
<div style="margin-bottom: 10px;">
<label for="pagetitle"> Page Titel</label>
<input id="pagetitle" type="text" class="" name="topic[topic_title]" style="width: 96.4%;padding: 10px;font-size: 18px;">
</div>
<iframe src="WYSIWYG.php" style="width:100%;height:500px;border:0px;background:red;" title="WYSIWYG Editor" id="wysiwygIframe"></iframe>
<!-- 隐藏域：用来存储编辑器内容，会随表单一起提交 -->
<textarea name="topic[topic_content]" id="editorContentHolder" style="display:none;"></textarea>
<input type="submit" style="width:100.4%;padding:10px;background:#2a3547;color:#2b9ff6; border:0px; font-size:16px" value="Publish">
</form>

<script>
// 监听表单提交事件
document.getElementById('topicForm').addEventListener('submit', function(e) {
    const wysiwygFrame = document.getElementById('wysiwygIframe');
    
    // 检查编辑器是否加载完成
    if (!wysiwygFrame.contentWindow || !wysiwygFrame.contentWindow.getEditorContent) {
        alert('编辑器还没加载好，请稍等再提交');
        e.preventDefault(); // 阻止表单提交
        return;
    }
    
    // 获取编辑器内容
    const editorContent = wysiwygFrame.contentWindow.getEditorContent();
    // 把内容填充到隐藏域
    document.getElementById('editorContentHolder').value = editorContent;
    
    // 继续提交表单
});
</script>

关键注意事项 #

• 同域要求：主页面（ntopic.php）和WYSIWYG.php必须在同一个域名（包括相同的子域名、端口）下，否则浏览器的跨域安全策略会阻止主页面访问iframe内的内容。如果是跨域场景，需要用postMessage来传递内容，不过一般自建编辑器都是同域的，这个问题不大。
• 字段命名：隐藏域的name是topic[topic_content]，和标题字段topic[topic_title]保持一致的命名格式，这样PHP里的$_POST['topic']就能同时拿到标题和内容了。
• 标签闭合：之前的代码有未闭合的HTML标签（比如<head>、<body>都没关），这会导致页面渲染异常，已经在修复后的代码里补全了。

这样修改后，点击Publish按钮时，编辑器的内容就会被同步到主表单的隐藏域，然后和标题一起提交到PHP，你就能在$_POST['topic']['topic_content']里拿到编辑器的值了。

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