Question

在我的网站上，我有一个项目列表，旁边有一个编辑按钮，或者一个用于创建新项目的选项。

当您单击“编辑”时，我通过AJAX向另一个PHP文件发出请求，该文件将返回编辑表单，该表单已预先填写了您单击以进行编辑的项目的详细信息。

如果您选择添加新项的选项，它将对同一文件进行另一个AJAX调用，并返回未填写任何内容的表单。

不过，表单的一部分是在iframe中制作的WYSIWYG文本编辑器，如下所示：

HTML：

<iframe name='richTextField' id='wysiwyg'></iframe>

脚本：

richTextField.document.designMode = 'On';

因此，当我想创建一个新项目时，它可以很好地工作，它可以加载表单，并且可以在iframe中编辑任何内容。

但是，当我要编辑现有项目时，会向iframe添加一个src属性，如下所示：

src='myFile.php?id=$edit_id'

源文件很基本，只有几行，但是它使用$_GET变量作为您要编辑的项目的ID。它向数据库查询该ID，并仅回显如下内容：

<?php
if (isset($_GET['id'])) {
    $ID = $_GET['id'];
    $params = [$ID];
    $sql = "SELECT * FROM tableWHERE id=?";
    $stmt = DB::run($sql,$params);
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $content = $row["content"];
    }
}
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <?php echo $content; ?>
</body>
</html>

这会将我想要的内容按预期加载到iframe中，但是我无法对其进行编辑。

我很确定这与我使用AJAX加载从另一个文件中获取带有$ _GET变量的文件有关，但是它以我希望的方式加载内容

任何想法或解释为什么会发生这种情况或任何暗示都将不胜感激。

Answer 1

您从哪里打来richTextField.document.designMode = 'On';？

您可以尝试iframe的contentDocument吗？

document.getElementById('wysiwyg').contentDocument.designMode="on";

编辑：由于注释中未格式化代码，因此进行编辑以添加工作代码以响应注释。

您会看到iframe最初不可编辑。按钮单击事件后，由于designMode设置为“ on”，因此iframe是可编辑的；

`

<html>
    <head></head>
    <body>
        <iframe name='richTextField' id='wysiwyg'></iframe>
        <div id="div">
            Div Content
        </div>
        <button id="testbutton">Test Button</button>
        <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
        <script>
            $('#testbutton').click(function(){
                var xmlhttp = new XMLHttpRequest(); 
                xmlhttp.onreadystatechange = function(){ 
                    if(this.readyState == 4 && this.status == 200){ 
                        $("#div").html(this.responseText); 
                        $("#div").slideDown("slow"); 
                        enableEditMode(); 
                    } 
                }; 
                var id = 51;
                xmlhttp.open("POST", "test.php?id="+id, true); 
                xmlhttp.send(); 
            });
            function enableEditMode (){ 
                richTextField.document.designMode = 'On'; 
            }
        </script>
    </body>
</html>

`

通过AJAX在src中使用$ _GET变量加载iframe

1 个答案: