Question

I am developing a WYSIWYG editor using the iframe technique. I need to know an idea to set a JavaScript method to overide keyboard event replacing charCode to another CharCode of a different language. For example if I am pressing “a” it will return the Arabic character set in Arabic language keyboard.

UPDATE – 14th May 2011
I have managed to implement a solution as suggested by @Tim only on chrome browser. I have noticed incompatibility of switching the designMode=”on” when it is created inside the DOM using javascript. Following is the code and you can also see the test page here – jsfiddle

JAVASCRIPT – JQUERY

$(document).ready(function(){
var textarea = $("#textarea"); 
var frame = $("<iframe class='thaana-editor-html' id='editable' />");
$(frame).width('500px'); 
$(frame).height('250px'); $(textarea).parent().prepend(frame);
var iframe = document.getElementById("editable"); 
var iframeObject = $(iframe).contents().get(0); 
iframeObject.designMode = "on";

});

HTML

<div id="content">
<textarea class="thaanaEditor" id="textarea" ></textarea>
</div>

I have tested on

• Chrome v11 – works fine
• IE8 – works fine
• IE9 – not tested yet
• Firefox -3.6 & 4 – NOT working – iframe is not editable as in designmode

Answer 1

I’ve answered a similar question before: Need to set cursor position to the end of a contentEditable div, issue with selection and range objects (see also Changing the keypress). The same technique applies to an editable iframe: you’ll need to add the keypress event handler to the iframe’s document. For example:

function handleKeypress(evt) {
    // See linked answer for implementation
}

var iframe = document.getElementById("your_iframe_id");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

if (iframeDoc.addEventListener) {
    iframeDoc.addEventListener("keypress", handleKeypress, false);
} else if (iframeDoc.attachEvent) {
    iframeDoc.attachEvent("onkeypress", handleKeypress);
}