gpt4 book ai didi

javascript - iframe 在附加内容之外不再可点击

转载 作者:太空宇宙 更新时间:2023-11-04 13:04:33 24 4
gpt4 key购买 nike

我得到了这个简单的 iframe text editor来自 this thread .我一直在尝试制作一个“回复引用”功能,以将带有 html 标签的帖子内容附加到编辑器。但是我遇到了让 iframe 正文可点击并在灰色附加 div 元素之外输入文本的问题。是否有任何解决方案可以使 body 再次可点击?

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 语法,但我在尝试时遇到了未定义文档错误)

最佳答案

尝试

$('#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/

关于javascript - iframe 在附加内容之外不再可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25231019/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com