iFrameでEnterキーを押す

私はメッセージを作成するためにiFrameを持っています。しかし、iFrameの入力中にEnterキーを押すと別のdivが作成されますが、<br/>を作成します。私はexecCommandのinsertBrOnReturnを使ってみましたが、うまく動作しませんでした。何か案は？前もって感謝します！iFrameでEnterキーを押す

stackoverflowの中JSFiddleが実際に動作しませんが、私は次のように "Craz1k0ek/d869w67b /" で、既存のデフォルトのjsfiddle.net

function iFrameOn() { 
 
    richTextField.document.designMode = 'On'; 
 
    richTextField.document.body.style.fontFamily = 'Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif'; 
 
} 
 
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 submit_form() { 
 
    var theForm = document.getElementById("myForm"); 
 
    theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML; 
 
    theForm.submit(); 
 
}

<body onload="iFrameOn()"> 
 
    <form action="" name="myForm" id="myForm" method="post"> 
 
    <p> 
 
     Title 
 
     <input name="title" id="title" type="text" size="80" maxlength="80"> 
 
    </p> 
 
    <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"> 
 
    </div> 
 
    <textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> 
 
    <iframe name="richTextField" id="richTextField" style="border:#000 1px solid; width:700px; height:300px;"></iframe> 
 
    <input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"> 
 
    </form> 
 
</body>

出典

2016-11-08 Craz1k0ek

後、私はsubmit_form機能を変更しました：

function submit_form() { 
    remove_divs(); 
    var theForm = document.getElementById("myForm"); 
    theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML; 
    theForm.submit(); 
}

そして私は次のようであるremove_divs機能を追加しました：

function remove_divs() { 
    var frameHTML = window.frames['richTextField'].document.body.innerHTML; 
    frameHTML = frameHTML 
     .replace(/<div><br><\/div>/g, '') 
     .replace(/<div>/g, '<p>') 
     .replace(/<\/div>/g, '</p>'); 
    $(window.frames['richTextField'].document.body).html(frameHTML); 
}

これは、すべての<div><br></div>要素を何も置き換えずに、<p>とすべての</div>の要素を</p>と置き換えます。これは、フィールド内のテキストのフォーマットを正確に行います。そう、私も、私はrichTextFieldへのアクセスを獲得する方法についていくつかのマイナーな警告を得た

window.onload = function() { 
    window.frames['richTextField'].document.designMode = "On"; 
}

：

は、その後、私はJavaScriptのファイルに余分なコードを配置することによって、次のようにすることを解決DesignMode = 'On';を設定すると問題がありました私はwindow.frames['richTextField'].document.execCommandのすべてのrichTextField.document.execCommand要素を置き換えました。

こちらがお役に立てば幸いです。

出典

2016-11-08 18:06:52 Craz1k0ek

答えて

関連する問題