Php inside iframe not showing
I created a WYSIWYG editor as part of my admin panel that works great and goes to the main page. However, if I want to edit this post, I want it to appear inside an iframe, so I can update it without losing the styling.
Here's create a post with a 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 />
!! - PLAY TO GO HERE, SHOW THE MAIL, DON'T LOSE ANY STYLE - !!
<input type="submit" value="Update" name="submit" />
</form>
</div>
<?php
}
?>
I tried to just show the iframe with php inside, but of course it is not that easy, if I show inside the textbox it is just cartridges in html. I'm a little unsure?
So, I was able to echo in the post, 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 an 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 dgdfgd");
})
</script>
+3
source to share
2 answers
Close with this. jQuery is amazing and takes care of a lot!
If you have current script tags:
Create a page named 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>
+3
source to share
I figured it out - so this is the JS I used to include 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>
0
source to share