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

jQuery Cleditor wysiwyg文本编辑器：keyup（）适用于webkit浏览器，但不适用于Firefox或IE(jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE)

我正试图跟上以前的Stackoverflow问题，关于如何在外部HTML元素（如<p>显示来自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>

我已经阅读从jquery获取iframe的内容，我需要使用“window.top ....访问主页并以此方式传递，因为.contents（）不被所有浏览器支持”，但我不是确定如何使用window.top来达到这个目的，并希望有人能够阐明这个话题。

I'm trying to follow up on a previous Stackoverflow question about how to display content from a Cleditor textbox in an external HTML element such as a <p>. Here's the question and the fiddle which solves my problem in webkit browsers but not Firefox or IE:

Here's the code from the fiddle:

<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>

I've read Get content of iframe from jquery that I need to use "window.top.... to access the main page and pass it that way because .contents() is not supported by all browsers" but i'm not sure how to use window.top for this purpose and am hoping someone might be able to shed some light on this topic.

最满意答案

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建议修改插件以添加自己的函数：从jquery CLEditor获取内容

编辑：根据你的意见，上面的问题结果不起作用，我修改了下面的代码。这适用于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/

The cleditor documentation states that it does have a "change" event which it claims to work with the 'keyup' event, but unfortunately in my testing it didn't work as expected with Firefox 7 (requires clicking out of the text-editor).

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

Code:

var cledit = $("#input").cleditor()[0]; cledit.change(function(){ var v = this.$area.context.value; $('#x').html(v); });

There is also another StackOverflow question which asked about the same thing, in which user Ling suggests modifying the plugin to add your own function: Get content from jquery CLEditor

Edit: Based on your comments with the above SO question result's not working, I've amended the code below. This works in IE9 and IE9's "IE8" developer mode. 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); }); });

Another Edit: To get the HTML, you have to find body within the iframe like $(this).find("body").html(). See the code below. JSFiddle: http://jsfiddle.net/qm4G6/84/

更多推荐