jQuery Cleditor 在 keyup 上获取 textarea 值答案

【问题标题】：jQuery Cleditor get textarea value on keyupjQuery Cleditor 在 keyup 上获取 textarea 值
【发布时间】：2011-12-08 13:06:08
【问题描述】：

我正在使用 Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html。我想获取 keyup 的值并将文本插入另一个 div。 cleditor 带有我当前在下面的 jsfiddle 示例中使用的 change() 事件，但这与 keyup 不同。我希望在我输入时更新 div。我尝试了 keyup 但它不起作用。

这是我现在拥有的

$("#input").cleditor().change(function(){
    var v = $('#input').val();
    $('#x').html(v);
})

检查 jsfiddle http://jsfiddle.net/qm4G6/11/

【问题讨论】：

标签： javascript jquery wysiwyg onkeyup cleditor

【解决方案1】：

似乎cleditor 隐藏了textarea 并用iframe 替换它（参见cleditor 源代码的第203 行）。

所以要实现你想要的，你只需要访问生成的iframe 内容：

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

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

Updated jsFiddle

更新以解决蒂姆的评论

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

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

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

Updated jsFiddle

更新 2

用户ima007 能够找到更好的跨浏览器解决方案：jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

【讨论】：

这个小提琴解决方案适用于 webkit 浏览器、chrome 和 safari，但不适用于 firefox 或 IE，我无法弄清楚，但我想知道是否有人可以为这 2 个提供代码修复浏览器？谢谢你，-蒂姆彼得森
我在这里回答了您的后续问题：stackoverflow.com/questions/7864012/…

【解决方案2】：

我可以通过稍微修改编辑器的源代码来实现这一点 - 在refresh 方法（第801行）中，我修改了iframe doc的模糊事件处理程序。

上一个

// Update the textarea when the iframe loses focus
    ($.browser.mozilla ? $doc : $(contentWindow)).blur(function() {
      updateTextArea(editor, true);
    });

修改为

// Update the textarea when the iframe loses focus or keyup happens
        ($.browser.mozilla ? $doc : $(contentWindow)).bind('blur keyup', function (e) {
            updateTextArea(editor, true);

            if (options.keyup && e.type === 'keyup')
                options.keyup(editor.$area.val());
        });

并且在初始化时传递的选项中，可以定义

$("#element").cleditor({
keyup : function (text) {
 alert(text);
 // do something
}
});

希望这对任何人都有帮助。

问候

【讨论】：

【解决方案3】：

您是否尝试过使用 CLEditor '.doc' 属性？

doc - 当前在 iframe 中编辑的文档对象。 cleditor documentation

var inputDoc = $("#input").cleditor().doc;

$(inputDoc).keyup(function(){
    var v = $('#input').val();
   $('#x').html(v);
})

【讨论】：

链接已损坏，但是，documentation 也说：These properties should be considered readonly.。