Javascript iframe在附加内容之外不再可单击

我从你那里得到了这个简单的答案。我一直在尝试使用“带引号的回复”函数将带有html标记的帖子内容附加到编辑器中。但是我遇到了一个问题，那就是让

iframe

主体可点击，并在灰色附加div元素之外输入文本。有没有办法让身体再次点击

HTML:

wreeeeeeeeeedsfsd sdfd sddfsfsf报价单
B
我
Arial
连环漫画
信使新
单一型
塔荷马
时代

代码：

document.getElementById（'textEditor'）.contentWindow。document.designMode=“on”；
document.getElementById（'textEditor'）.contentWindow。document.close（）；
$（“#粗体”）。单击（函数（）{
if（$（this）.hasClass（“选定”））
{
$（此）.removeClass（“选定”）；
}否则
{
$（此）.addClass（“选定”）；
}
boldIt（）；
});
$（“#斜体”）。单击（函数（）{
if（$（this）.hasClass（“选定”））
{
$（此）.removeClass（“选定”）；
}否则
{
$（此）.addClass（“选定”）；
}斜体（）；
});
$（“#字体”）.change（函数（）{
changeFont（$（“#字体”）.val（）；
});
函数boldIt（）
{  
var edit=document.getElementById（“textEditor”）.contentWindow；
edit.focus（）；
edit.document.execCommand（“粗体”，false，”）；
edit.focus（）；
}
函数斜体（）
{  
var edit=document.getElementById（“textEditor”）.contentWindow；
edit.focus（）；
edit.document.execCommand（“斜体”，false，”）；
edit.focus（）；
}
函数更改字体（字体）
{
var edit=document.getElementById（“textEditor”）.contentWindow；
edit.focus（）；
edit.document.execCommand（“FontName”，false，font）；
edit.focus（）；
}
$（'#textdeditor'）.contents（）.find（'body'）.css（“单词包装”、“断开单词”）；
$（“#答复”）。单击（函数（）{
var content=$（this.prev（）.html（）；
$（“#textEditor”）.contents（）.find（“body”）.html（'Reply to someone
'+content+''）；
});

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

试试看

$('#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 />");
});

$（'#textEditor'）.contents（）.find（'body'））
.css（“换行”、“断字”）
.开启（“键控”，功能（e）{
var _break=$（即目标）；
如果（_break.children（）.is（“.break”））{
$.noop（）；
}否则{
_break.find（“div”）
.在（“
”）之后；
};
});
$（“#答复”）。单击（函数（）{
var content=$（this.prev（）.html（）；
var frame=$（“#文本编辑器”）.contents（）；
frame.find（“body”）
.append（“”
+“回复某人”
“+内容+”；
frame.find（“div”）
.在（“
”）之后；
});

---

JSFIDLE

对需求不确定？单击

iframe

中的

bold

、

italic

和

font

选项时，是否需要这些选项来调整文本？Thanks@guest271314对不起，没有说清楚。问题是，当我点击'quote'按钮将文章内容附加到编辑器中时，我无法再在附加的grey div元素之外输入文本。在

iframe

正文中的附加元素之外输入文本有什么解决方案吗？

    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>');
});

$('#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 />");
});