我已經遵循了關於如何創建wysiwyg輸入文本區域的教程。 文本區域正常工作。我遇到的問題是,我希望能夠讓用戶選擇編輯文本區域發佈的信息。使用javascript在iframe中發佈php腳本
信息存儲在我的數據庫中,並查詢了數據庫,並將這些信息放入一個名爲$ details的變量中。我想把它放在iframe中。
這是我的表單代碼。
<body onLoad="iFrameOn();" >
<form action="inventory_edit.php" enctype="multipart/form-data" name="myForm" id="myform" method="post">
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
</div>
<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"><?php echo $details; ?> blah blah </textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;" ></iframe>
<input type="submit" name="button" id="button" value="Make Changes" onClick="javascript:submit_form();"/>
</form>
這是JavaScript文件
function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function submit_form(){
var theForm = document.getElementById("myform");
theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
我花了幾個小時試圖找到一個解決。這是我添加了嘗試並將我的PHP變量添加到iframe。
這被添加到iFrameOn()函數
var theForm = document.getElementById('myform');
window.frame['richTextField'].document.body.innerHTML = theForm.elements['myTextArea'].value;
抱歉,如果這是一個很大的代碼。謝謝
編輯: 這是什麼文本編輯器看起來像。
我希望能夠預先填充數據庫中已有內容的iFrame,以便用戶可以對其進行編輯。
nitpick:你不要「發佈php」。你「發佈到PHP腳本」。 – 2012-08-02 14:03:45
@MarcB我不好。我的意思是把我的可變內容放入iFrame中 – Will 2012-08-02 14:09:27
我不完全瞭解問題出在哪裏 - 在哪個階段出現問題?你得到什麼結果而不是你想要的結果? – DaveRandom 2012-08-28 10:22:40