iframe 在附加内容之外不再可点击答案

【问题标题】：iframe not clickable anymore outside appended contentiframe 在附加内容之外不再可点击
【发布时间】：2014-08-10 17:05:22
【问题描述】：

我从this thread 得到了这个简单的iframe text editor。我一直在尝试制作一个“用引号回复”功能，以将带有 html 标签的帖子内容附加到编辑器。但是我遇到了一个问题，即让iframe body 可点击并在灰色附加的 div 元素之外输入文本。有什么解决方案可以让身体再次可点击？

HTML：

<div class='margin'><div class='content'><h4>wreeeeeeeeee dsfsd sdfd  sddfsfdsf</h4></div> <button id='reply'>Quote</button>
<div>
<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>
<select id="fonts">
 <option value="Arial">Arial</option>
 <option value="Comic Sans MS">Comic Sans MS</option>
 <option value="Courier New">Courier New</option>
 <option value="Monotype Corsiva">Monotype</option>
 <option value="Tahoma">Tahoma</option>
 <option value="Times">Times</option>
</select>

<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
 </iframe> 
<input type='hidden' name='comments' id='comments' />    

<input id='submit'type='submit' value='submit'/>

代码：

    document.getElementById('textEditor').contentWindow.  document.designMode="on";
    document.getElementById('textEditor').contentWindow.  document.close();
    $("#bold").click(function(){

    if($(this).hasClass("selected"))
    {
        $(this).removeClass("selected");
    }else
    {
        $(this).addClass("selected");
    }
        boldIt();
    });
    $("#italic").click(function(){

    if($(this).hasClass("selected"))
    {
        $(this).removeClass("selected");
    }else
    {
        $(this).addClass("selected");
    }ItalicIt();
    });
    $("#fonts").change(function(){
    changeFont($("#fonts").val());
    });

function boldIt()
    {  
       var edit = document.getElementById("textEditor").contentWindow;
       edit.focus(); 
       edit.document.execCommand("bold", false, ""); 
       edit.focus();
    }

function ItalicIt()
     {  
        var edit = document.getElementById("textEditor").contentWindow;
        edit.focus(); 
        edit.document.execCommand("italic", false, ""); 
        edit.focus();
     }

function changeFont(font)
{
    var edit = document.getElementById("textEditor").contentWindow;
        edit.focus(); 
        edit.document.execCommand("FontName", false, font); 
        edit.focus();
}

$('#textEditor').contents().find('body').css("word-wrap", "break-word");

$('#reply').click(function(){
  var content = $(this).prev().html();
  $("#textEditor").contents().find("body").html('<div style="background:grey;color:#fff;border:1px solid #222">Reply to someone<br>'+content+'</div>');
});

（请原谅我没有将示例代码转换回 jQuery 语法，但我在尝试中遇到了未定义的文档错误）

【问题讨论】：

不确定要求？是否需要 bold 、 italic 和 font 选项在单击这些选项时调整 iframe 中的文本？谢谢
@guest271314 抱歉没有说清楚。问题是，当我单击“引用”按钮将帖子内容附加到编辑器时，我无法再在附加的灰色 div 元素之外输入文本。是否有任何解决方案可以在 iframe 正文中的附加元素之外输入文本？

标签： javascript jquery html css iframe

【解决方案1】：

试试

$('#textEditor').contents().find('body')
.css("word-wrap", "break-word")
.on("keyup", function(e) {
    var _break = $(e.target);
    if (_break.children().is(".break")) {
      $.noop();
    } else {
    _break.find("div")
    .after("<br class=break />");
    };
});

$('#reply').click(function(){
  var content = $(this).prev().html();
  var frame = $("#textEditor").contents();
    frame.find("body")
   .append('<div style="background:grey;color:#fff;border:1px solid #222">'
                          +'Reply to someone<br>'+content+'</div>');
    frame.find("div")
    .after("<br class=break />");
});

jsfiddle http://jsfiddle.net/guest271314/Kxmaf/568/

【讨论】：