2016-11-08 106 views
0

我有一个iFrame来创建消息。但是,当我在输入iFrame时按Enter键时,它会创建另一个div,但是,我希望它创建一个<br/>。我尝试使用execCommand insertBrOnReturn,但我没有得到它的工作。有任何想法吗?提前致谢!iFrame中止输入密钥

中的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>

回答

0

后,我改变了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>元素替换所有<div>元素与</p>。这将完全按照我的需要格式化字段中的文本。

然后,我有一个问题与设置DesignMode = 'On';我解决了放置额外的代码在JavaScript文件,如下所示:

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

我也得到了我如何获得访问richTextField一些轻微的警告,因此,我将所有richTextField.document.execCommand元素替换为window.frames['richTextField'].document.execCommand

我希望这有助于!