Urdu WebPad Integration Guide

Here pathToScript denotes the path to the UrduEditor.js file.  This line should precede any use of Urdu WebPad on the web page. You can yourself decide on the best place to insert this line. In case Urdu WebPad is used on every page of the website, it might make more sense to put this code inside the header. This way you will not have to insert this line in every web page and you can instead focus on finding the appropriate edit areas and making Urdu WebPad work inside these edit areas. One such example is WordPress. In order to integrate Urdu WebPad in different edit areas of WordPress, both on the back-end as well as on the front-end side, it suffices to include the UrduEditor.js script inside its header.

You need to initialize Urdu WebPad after including its script in the web page. This is done using the following code:

Finally you can add Urdu support to the (single-line or multi-line) edit areas using any of the following methods:

As can be seen from the above code, the initUrduEditor() accepts a editors parameter which, in effect is an array of pairs of names and point sizes. Here, names are actually the name attributes of the edit areas inside the web page.  The advantage of using this approach is that this function call can also be placed inside the header of the web page. The page-load event-handling mechanism of Urdu WebPad takes care of waiting until the page loads completely, and then transforming the desired edit areas into Urdu edit areas.

1. Using the makeUrduEditor() function

In this method the makeUrduEditor() is used with the following syntax:

<script language="JavaScript" type="text/javascript">																																																																																												
	makeUrduEditor(editAreaName , pointSize);
</script>

It must be noted that this function call should occur after the definition of the edit area in the page.

2. Using the makeUrduEditors() function

The makeUrduEditors() function accepts an array of pairs of editor names and the point sizes in a fashion similar to that in the initUrduEditor() function.

<script language="JavaScript" type="text/javascript">
	makeUrduEditors({"editor1":size1, "editor2":size2, "editor3":size3,..});
</script>

Again the makeUrduEditors() function should be called after the definition of all the edit area elements that it applied to.

3. makeUrduEditorById()/makeUrduEditorsById() functions

Although the function makeUrduEditor is convenient for converting an edit area into an Urdu edit area, it does not work if many edit areas with the same name attribute are present on the web page. To overcome this problem you have to define the id attribute of the edit area to distinguish among those and then use either the makeUrduEditorById() function or the makeUrduEditorsById() function which take the id attribute of the edit areas instead of the name attribute.

<script language="JavaScript" type="text/javascript">																																																																																												
	makeUrduEditorById(editAreaId , pointSize);
</script>
	

<script language="JavaScript" type="text/javascript">
	makeUrduEditorsById({"editor1":size1, "editor2":size2, "editor3":size3,..});
</script>

4. Using the on-screen keyboard

The code for the on-screen keyboard has been taken out of UrduEditor.js and it now resides in the webpadkeyboard.js file. It is included by passing an additional parameter onscreenKeyboard with a value of 1 to the initUrduEditor() function as show in the following.

<script language="JavaScript" type="text/javascript"> 
	initUrduEditor
	(
		{
			onscreenKeyboard:1
		}
	);
</script>

Later the on-screen keyboard is displayed on the web page by calling the writeKeyboard() function as shown in the following:

<script language="JavaScript" type="text/javascript">
	writeKeyboards();
</script>

5. Switching language mode

The short-cut key for switching the language mode in Urdu WebPad is CTRL-SPACE. The functions called for switching the mode, depending on whether the edit area was converted into an Urdu Edit area by calling makeUrduEditor() or makeUrduEditorById(), are the following:

setUrdu(name)/setEnglish(name)

setUrduById(editorid)/setEnglishById(editorid)

It is also possible to generate a pair of radio buttons for each of the Urdu edit contols to make this language mode switch. The function writeToggleControl(editor) generates these controls. The parameter editor can either be the name or the id attribute of the Urdu edit area.