javascript jQuery Cleditor 在 keyup 上获取 textarea 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7781404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Cleditor get textarea value on keyup
提问by Pinkie
I'm using Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html. I want to get the value on keyup and insert the text into another div. cleditor comes with change() event that i'm currently using in the jsfiddle example below, but thats not the same as keyup. I want the div to be updated as i'm typing in. I tried keyup but it doesn't work.
我正在使用 Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html。我想获取 keyup 上的值并将文本插入另一个 div。cleditor 带有我目前在下面的 jsfiddle 示例中使用的 change() 事件，但这与 keyup 不同。我希望在输入时更新 div。我尝试了 keyup，但它不起作用。
Here's what i have now
这是我现在拥有的
$("#input").cleditor().change(function(){
var v = $('#input').val();
$('#x').html(v);
})
Check jsfiddle http://jsfiddle.net/qm4G6/11/
检查 jsfiddle http://jsfiddle.net/qm4G6/11/
回答by dgilland
It appears that cleditorhides the textareaand replaces it with an iframe(see line 203 of cleditor source).
似乎cleditor隐藏了textarea并将其替换为一个iframe（请参阅 cleditor 来源的第 203 行）。
So to achieve what you want, you just need to access the resulting iframecontents:
所以要实现你想要的，你只需要访问结果iframe内容：
$("#input").cleditor();
$(".cleditorMain iframe").contents().find('body').bind('keyup', function(){
var v = $(this).text(); // or .html() if desired
$('#x').html(v);
});
UPDATE to address Tim's comment
更新以解决蒂姆的评论
This works in Chrome and Firefox (I don't have access to IE):
这适用于 Chrome 和 Firefox（我无法访问 IE）：
$("#input").cleditor();
$( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', function(){
var v = $(this).text(); // or .html() if desired
$('#x').html(v);
});
UPDATE 2
更新 2
User ima007was able to find a better cross-browser solution: jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE
用户ima007能够找到更好的跨浏览器解决方案：jQuery Cleditor wysiwyg 文本编辑器：keyup() 在 webkit 浏览器中有效，但在 Firefox 或 IE 中无效
回答by saarthak
I was able to achieve this by slightly modifying the source code of the editor -
in refreshmethod (line 801) I modified the blur event handler of iframe doc.
我能够通过稍微修改编辑器的源代码来实现这一点 - 在refresh方法（第 801 行）中，我修改了 iframe 文档的模糊事件处理程序。
Previous
以前的
// Update the textarea when the iframe loses focus
($.browser.mozilla ? $doc : $(contentWindow)).blur(function() {
updateTextArea(editor, true);
});
Modified to
修改为
// 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());
});
and in the options that are passed at the time of initialisation, you can define
并在初始化时传递的选项中，您可以定义
$("#element").cleditor({
keyup : function (text) {
alert(text);
// do something
}
});
Hope this helps anyone.
希望这可以帮助任何人。
Regards
问候
回答by perlexed
Have you tried using of CLEditor '.doc' property?
您是否尝试过使用 CLEditor '.doc' 属性？
doc - The document object currently being edited in the iframe. cleditor documentation
doc - 当前在 iframe 中编辑的文档对象。 客户文件
var inputDoc = $("#input").cleditor().doc;
$(inputDoc).keyup(function(){
var v = $('#input').val();
$('#x').html(v);
})
