Php inside iframe not showing

Question

i have constructed a WYSIWYG editor as part of my admin panel which works wonderfully and posts out to the main page. However, If I want to edit that post I want the same to be show inside of the iframe so I can update without losing the style.

Here is the create post with the working 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>

Here is the update page:

<?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 TO GO HERE SHOWING THE POST WITHOUT LOSING ANY STYLE - !!

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



</form>

</div>



    <?php   
    }
    ?>

I have tried just showing the iframe with the php inside but of course it isn't as simple as that, if I display inside a textarea is just chucks in the html. I am a bit unsure?

So I have managed to echo in the post content but it disables the iframe so I cannot edit the content inside:

<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>

Here is the example of my page source:

<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

I figured it out - so here is the JS I used to enable to me to post in my PHP from my database to my iframe:

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

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

</script>

Answer 2

Fiddle around with this one. jQuery is amazing and takes care of a lot of things!

Where you have your current script tags put:

Create a page called loaddiv.php with:

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

then

<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