2012-08-02 59 views
1

我已經遵循了關於如何創建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; 

抱歉,如果這是一個很大的代碼。謝謝

編輯: 這是什麼文本編輯器看起來像。 WYSIWYG

我希望能夠預先填充數據庫中已有內容的iFrame,以便用戶可以對其進行編輯。

+0

nitpick:你不要「發佈php」。你「發佈到PHP腳本」。 – 2012-08-02 14:03:45

+0

@MarcB我不好。我的意思是把我的可變內容放入iFrame中 – Will 2012-08-02 14:09:27

+0

我不完全瞭解問題出在哪裏 - 在哪個階段出現問題?你得到什麼結果而不是你想要的結果? – DaveRandom 2012-08-28 10:22:40

回答

1

我用動態創建的外部文件對此進行了整理,然後調用到iframe中。我無法找到另一種方法來使用Iframe。

然而,這似乎有時會給多個用戶帶來問題 - 幸運的是,我的項目似乎通過創建文件夾和文件來避免這種情況。也許想用會話變量來創建它(因爲它將是唯一的)和退出時使用JS來刪除文件?

希望可以幫到

+0

感謝您回答很久以前發佈的問題!謝謝 – Will 2013-01-14 14:34:28