10

我正在使用 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/

4

3 回答 3

17

似乎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);
});

更新了 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);
});

更新了 jsFiddle

更新 2

用户ima007能够找到更好的跨浏览器解决方案：jQuery Cleditor wysiwyg 文本编辑器：keyup() 适用于 webkit 浏览器，但不适用于 Firefox 或 IE

于 2011-10-16T15:07:53.093 回答
1

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

以前的

// 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
}
});

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

问候

于 2012-03-21T06:19:04.790 回答
0

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

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

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

$(inputDoc).keyup(function(){
    var v = $('#input').val();
   $('#x').html(v);
})
于 2014-01-23T08:58:34.017 回答