2

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
Raftalks
  • 2,017
  • 1
  • 21
  • 25

2 Answers2

2

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);
}
Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Thanks Tim. I will check with ur method. – Raftalks May 13 '11 at 08:19
  • Hi Tim, I am have tried your method, and it seems to work fine with html div elements, BUT not seems to work with iframe. The problem sits where getRangeAt(0). Please see the following at jsFiddle - [link](http://jsfiddle.net/Ukkmu/38/) - please note that some modification done to work with jquery – Raftalks May 13 '11 at 20:19
  • 1
    @Raf: Yes, fair enough. The `window` object needs to be the iframe's window and the document needs to be the iframe's document. I've updated your jsFiddle example: http://jsfiddle.net/Ukkmu/39/ – Tim Down May 13 '11 at 23:30
  • hi @Tim, pls see the update posted in the question. Needs to know a solution where the iframe should work fine with all the browsers in designmode. – Raftalks May 14 '11 at 14:00
0

As I understand you want to force your user to write with your virtual keyboard, for example when user pressed D you display ي and ...

In Persian we mostly use this javascript library created by Mahdi HashemiNezhad. With this your user can change between Persian & English keyboard. To change the keyboard for your locale, you can replace the Unicode equivalents (for arabic users most of it are in the right place and some ofthem are changed)

let meknow if there is a problem

Nasser Hadjloo
  • 12,312
  • 15
  • 69
  • 100
  • Thank you Nasser. However I am trying to work this within an editable div or iframe. The javascript you have pointed will only work with input fields. – Raftalks May 14 '11 at 13:02