1

wysiwyg 入力テキスト領域の作成方法に関するチュートリアルに従いました。テキストエリアは正常に動作します。私が抱えている問題は、テキスト領域によって投稿された情報を編集するオプションをユーザーに提供できるようにしたいということです。

情報は私の DB に保存され、DB にクエリを実行し、その情報を $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 varをiframeに追加しようとして追加したものです。

これは iFrameOn() 関数に追加されます

var theForm = document.getElementById('myform');
window.frame['richTextField'].document.body.innerHTML = theForm.elements['myTextArea'].value;

これが多くのコードである場合は申し訳ありません。ありがとう

編集: テキスト エディターは次のようになります。 ウィジウィグ

ユーザーが編集できるように、既にデータベースにあるコンテンツを iFrame に事前入力できるようにしたいと考えています。

4

1 に答える 1

1

これを、動的に作成されてから iframe に呼び出された外部ファイルで整理しました。Iframe でそれを行う別の方法が見つかりませんでした。

ただし、これにより複数のユーザーに問題が発生する場合があります。幸いなことに、私のプロジェクトでは、フォルダーとファイルを作成することでこれを回避できたようです。セッション変数を使用して作成し (一意になるため)、終了時に JS を使用してファイルを削除することを考えてください。

それが役立つことを願っています

于 2013-01-12T10:26:25.017 に答える