9

我正在尝试跟进上一个 Stackoverflow 问题，该问题是关于如何在外部 HTML 元素（例如<p>. 这是解决我在 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>

我已经阅读了从 jquery 获取 iframe 的内容，我需要使用“window.top .... 来访问主页并以这种方式传递它，因为所有浏览器都不支持 .contents()”，但我不是确定如何为此目的使用 window.top，并希望有人能够对这个主题有所了解。

4

2 回答 2

13

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

jsfiddle：http: //jsfiddle.net/qm4G6/27/

代码：

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

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

还有另一个 StackOverflow 问题询问了同样的事情，其中​​用户 Ling 建议修改插件以添加您自己的功能： Get content from jquery CLEditor

编辑：根据您对上述 SO 问题结果不起作用的评论，我修改了下面的代码。这适用于 IE9 和 IE9 的“IE8”开发者模式。http://jsfiddle.net/qm4G6/80/

$(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);
});

});

另一个编辑：要获取 HTML，您必须在 iframe 中找到 body，例如$(this).find("body").html(). 请参阅下面的代码。JSFiddle：http: //jsfiddle.net/qm4G6/84/

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);
});
于 2011-10-23T04:42:44.393 回答
0

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

这适用于 Chrome 和 Firefox（我无权访问 IE）：

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

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

更新了 jsFiddle

更新

这也适用于 Chrome 和 Firefox。也许IE也是？

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

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

jsFiddle

于 2011-10-23T04:33:59.967 回答