Javascript jQuery Cleditor wysiwyg文本编辑器：keyup（）适用于webkit浏览器，但不适用于Firefox或IE

我正试图跟进前面的Stackoverflow问题，该问题涉及如何在外部HTML元素（如

）中显示来自Cleditor文本框的内容。以下是解决我在webkit浏览器（而不是Firefox或IE）中的问题的方法：

下面是小提琴上的代码：

<textarea id="input" name="input"></textarea>
<p id="x"></p>  

<script>
  $("#input").cleditor();

  $(".cleditorMain iframe").contents().find('body').bind('keyup',function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
  });
</script>

$（“#输入”）.cleditor（）；
$（“.cleditorMain iframe”）.contents（）.find（'body'）.bind（'keyup'，function（）{
var v=$（this.text（）；//或.html（），如果需要
$（'#x'）.html（v）；
});

---

我已经读到我需要使用“window.top….来访问主页并传递它，因为并非所有浏览器都支持.contents（）”，但我不确定如何使用window.top来实现这一目的，我希望有人能够对这一主题有所了解

既然我回答了这个问题，我想我也会回答这个问题；）

这适用于Chrome和Firefox（我没有访问IE的权限）：

更新

这也适用于Chrome和Firefox。也许我也是

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentDocument ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

---

cleditor文档声明它确实有一个“更改”事件，它声称与“keyup”事件一起工作，但不幸的是，在我的测试中，它在Firefox 7上没有按预期工作（需要从文本编辑器中单击）

Jsfiddle：

代码：

还有另一个StackOverflow问题也问了同样的问题，其中用户Ling建议修改插件以添加您自己的功能：

编辑： 基于您对上述问题的评论，所以问题结果不起作用，我已经修改了下面的代码。 这在IE9和IE9的“IE8”开发模式下工作

另一个编辑：要获取HTML，必须在iframe中查找body，如

$（this）.find（“body”）.HTML（）

。请参阅下面的代码。 JSFiddle：

---

嗨，diglland，是的，我可以确认Wesley的结果，不幸的是，你更新的代码在IE中不起作用，更多想法？谢谢使用“contentDocument”的另一个关键问题是它不能与$this.html（）一起使用；因此，文本格式（粗体、颜色等）丢失了，这在chrome和firefox中也是如此，糟糕！您好，ima007谢谢您的建议，我已经尝试过这个修复程序，但不幸的是，在可供下载的cleditor.js的第100行中似乎有一个bug，因此用户Ling的修复程序不起作用。为了让这个插件工作，我必须使用最小化的文件cleditor.min.js，它不能像Ling建议的那样被修复。嘿，Tim，我已经对IE进行了调整。它在IE9的IE模式下工作，尽管我还不确定是否实际安装了IE8——如果我得到一个，我会更新。嘿，ima007，不幸的是使用“contentWindow”不适用于html（）。我想保留$（'x'中的格式）如果有任何应用。对此有什么建议吗？谢谢-蒂姆请参阅我的最新编辑。你必须在iframe中搜索正文。很棒的Ima007！你的小提琴#84可以在chrome、firefox和IE9中使用。在IE9中，由于某种原因，粗体和斜体不会在$（'x'）中显示，但在其他方面它是完美的。再次感谢-蒂姆

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentDocument ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

var cledit = $("#input").cleditor()[0];

cledit.change(function(){
    var v = this.$area.context.value;
    $('#x').html(v);
});

$(document).ready(function(){

 var cledit = $("#inputcledit").cleditor()[0];
 $(cledit.$frame[0]).attr("id","cleditCool");

var cleditFrame;
if(!document.frames)
{
   cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
    cleditFrame = document.frames["cleditCool"].document;
}

$( cleditFrame ).bind('keyup', function(){
    var v = $(this).text(); 
    $('#x').html(v);
});

});

var cledit = $("#inputcledit").cleditor()[0];
$(cledit.$frame[0]).attr("id","cleditCool");

var cleditFrame;
if(!document.frames)
{
   cleditFrame = $("#cleditCool")[0].contentWindow.document;
}
else
{
    cleditFrame = document.frames["cleditCool"].document;
}

$( cleditFrame ).bind('keyup', function(){
        var v = $(this).find("body").html();
        $('#x').html(v);
});

$("div.cleditorToolbar, .cleditorPopup div").bind("click",function(){
      var v = $( cleditFrame ).find("body").html();
      $('#x').html(v);
});