Question

我已经构建了一个WYSIWYG编辑器作为我的管理面板的一部分，它可以很好地工作并发布到主页面。但是，如果我想编辑该帖子，我希望在iframe中显示相同内容，以便我可以在不丢失样式的情况下进行更新。

以下是使用iframe的创建帖子：

<form action="actions/newDocAdd.php" method="post" id="rtf">
    <input type="text" name="doc_title" id="doc_title" required="required" placeholder="Document Title"/><br />



    <button class="postEditBtn" type="button" onclick="bold()" title="Bold Text"><i class="fa fa-bold"></i></button>
    <button class="postEditBtn" type="button" onclick="italic()" title="Italic Text"><i class="fa fa-italic"></i></button>
    <button class="postEditBtn" type="button" onclick="underline()" title="Underline Text"><i class="fa fa-underline"></i></button>
    <button class="postEditBtn" type="button" onclick="fontName()" title="Font Family"><i class="fa fa-font"></i></button>
    <button class="postEditBtn" type="button" onclick="fontsize()" title="Font Size"><i class="fa fa-text-height"></i></button>
    <button class="postEditBtn" type="button" onclick="fontcolor()" title="Font Colour"><i class="fa fa-eraser"></i></button>
    <button class="postEditBtn" type="button" nclick="highlight()" title="Highlight Text"><i class="fa fa-magic"></i></button>
    <button class="postEditBtn" type="button" onclick="link()" title="Add/Edit Link"><i class="fa fa-link"></i></button>
    <button class="postEditBtn" type="button" onclick="unlink()" title="Remove Link"><i class="fa fa-chain-broken"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyLeft()" title="Text align-left"><i class="fa fa-align-left"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyCenter()" title="Text align-center"><i class="fa fa-align-center"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyRight()" title="Text align-right"><i class="fa fa-align-right"></i></button>

    <br><br>

    <textarea name="doc_content" id="doc_content" placeholder="Document Content" style="display: none;"></textarea>
    <iframe name="editor" id="editor" style="width:100%; height: auto;"></iframe>

    <br><br> 
    <input onclick="formsubmit()" type="submit" value="Create Document" name="submit"/><br />


</form>

以下是更新页面：

<?php require_once '../../db_con.php'; 

if(!empty($_GET['doc_id'])){
    $doc = intval($_GET['doc_id']);
try{
    $results = $db->prepare('select * from doc_list where doc_id = ?');
    $results->bindParam(1, $doc);
    $results->execute();

    } catch(Exception $e) {
    echo $e->getMessage();
    die();
    }

    $doc = $results->fetch(PDO::FETCH_ASSOC);    
    if($doc == FALSE){

        echo '<div class="container">';
        echo "<img src='../img/404.jpg' style='margin: 40px auto; display: block;' />";
        echo "<h1 style='margin: 40px auto; display: block; text-align: center;' />Oh Crumbs! You upset the bubba!</h1>";
        echo '<a href="userList.php"  style="margin: 40px auto; display: block; text-align: center;">Get me outta here!</a>';
        echo'</div>';
        die();
    }
}

?>



<?php
    if(isset($doc)){
    ?>


<form action="actions/updateDoc.php" method="POST">
    <input type="hidden" value="<?php echo $doc['doc_id'] ?>" name="doc_id" />
    <input type="text" value="<?php echo $doc['doc_title'] ?>" name="doc_title" />
    <br />
    <input type="text" value="<?php echo $doc['doc_content'] ?>" name="doc_content" />
    <br />

!! - IFRAME去这里展示没有任何风格的帖子 - !!

    <input type="submit" value="Update" name="submit" />   



</form>

</div>



    <?php   
    }
    ?>

我试过用php里面显示iframe，但当然不是那么简单，如果我在textarea里面显示只是在html中的chucks。我有点不确定？

所以我设法回复帖子内容，但它禁用了iframe，所以我无法编辑内容：

<script>

var iframe = document.getElementById('editor');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframe.document.open();
iframe.document.write("<?php echo $doc['doc_content']; ?>");
iframe.document.close();

</script>

以下是我的网页来源示例：

<form action="actions/updateDoc.php" method="POST">

    <input type="hidden" value="46" name="doc_id" />
    <input type="text" value="new document biatch!" name="doc_title" />
    <br />


    <button class="postEditBtn" type="button" onclick="bold()" title="Bold Text"><i class="fa fa-bold"></i></button>
    <button class="postEditBtn" type="button" onclick="italic()" title="Italic Text"><i class="fa fa-italic"></i></button>
    <button class="postEditBtn" type="button" onclick="underline()" title="Underline Text"><i class="fa fa-underline"></i></button>
    <button class="postEditBtn" type="button" onclick="fontName()" title="Font Family"><i class="fa fa-font"></i></button>
    <button class="postEditBtn" type="button" onclick="fontsize()" title="Font Size"><i class="fa fa-text-height"></i></button>
    <button class="postEditBtn" type="button" onclick="fontcolor()" title="Font Colour"><i class="fa fa-eraser"></i></button>
    <button class="postEditBtn" type="button" onclick="hiliteColor()" title="Highlight Text"><i class="fa fa-magic"></i></button>
    <button class="postEditBtn" type="button" onclick="link()" title="Add/Edit Link"><i class="fa fa-link"></i></button>
    <button class="postEditBtn" type="button" onclick="unlink()" title="Remove Link"><i class="fa fa-chain-broken"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyLeft()" title="Text align-left"><i class="fa fa-align-left"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyCenter()" title="Text align-center"><i class="fa fa-align-center"></i></button>
    <button class="postEditBtn" type="button" onclick="justifyRight()" title="Text align-right"><i class="fa fa-align-right"></i></button>

    <br><br>

    <textarea name="doc_content" id="doc_content" placeholder="Document Content" style="display: none;"></textarea>


    <iframe name="editor" id="editor" style="width:100%; height: auto;"></iframe>

<div id="editor1"></div> // As you can see nothing posting in here?



    <br><br> 
    <input onclick="formsubmit()" type="submit" value="Update Document" name="submit"/><br />

</div>

<script>
$(document).ready(function (){
    $("#editor1").html("dgdgdfg g <u style="background-color: yellow;">dgdf</u> gg &nbsp;dgdfgd");
})
</script>

Answer 1

摆弄这一个。 jQuery很棒，可以处理很多事情！

您放置当前脚本标记的位置：

使用以下命令创建名为loaddiv.php的页面：

<?php
echo['doc_content'];
?>

然后

<div id="editor1"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
    //$("#editor1").html("<?php echo $doc['doc_content']; ?>");
    $("#editor1").load("loaddiv.php");
})
</script>

jQuery .html() API

Answer 2

我想出来了 - 所以这里是我以前用来在我的PHP中从我的数据库发布到我的iframe的JS：

<script>
var iframe = document.getElementById('editor'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

    iframedoc.body.innerHTML = '<?php echo $doc['doc_content']; ?> ';

</script>

iframe中的Php没有显示

2 个答案: