I'm making a very simple Rich Text Editor using jquery... I don't want to use a third-party one.
I need to listen for events within an iframe (same domain etc), starting with typing. Apparently I'll need to use bind() a lot.
This is what I've got at the moment which works fine in IE8 (amazingly enough) but not Chrome.
<script>
$(function() {
$('#text').contents().bind("keyup keydown keypress", function(e) {
var code = e.keyCode || e.which;
alert(code);
return false;
});
});
</script>
<body>
<iframe id="text" name="text" src="edit.html"></iframe>
</body>
On the key press event above, I will also want to get the current value of 'edit.html' and update a textarea with that value...
Any help would be MUCH appreciated :)
Many thanks
EDIT: to explain further, edit.html is an editable file using "document.body.contentEditable = true;"
-
EDIT 2:
edit.html =
<script language="javascript">
function InitializeIFrame() {
document.body.contentEditable = true;
}
</script>
<html>
<body onload="InitializeIFrame();">
</body>
</html>
I seem to recall running into a problem when I was trying to communicate with an iframe (same domain etc). The trick I found is to do the binding inside the frame and bind to functions in the main window. Something like this (in edit.html):
<script>
$('body').bind("keyup keydown keypress", function(e) {
window.parent && window.parent.funcKey && window.parent.funcKey(e);
});
</script>
and then in the main page something like:
<script>
function funcKey(e) {
var code = e.keyCode || e.which;
alert(code);
return false;
}
</script>
I realise this does not exactly fit into the way you were trying to do it, but the same effect is achieved. From what I understand of javascript and iframes, in practice it's easier to communicate with a parent than it is to communicate with an iframe. If you really need two-way communication you could (going on the example above) use the return value of the function funcKey() to pass data back into the iframe.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With