Expanding upon what we have learned in Part 1, this tutorial will go into adding the ability to format text, attach images, add URLs, and change font colours within our WYSIWYG editor. Please feel free to ask questions and post suggestions to this tutorial.
Let's Begin
Adding additional formatting functions
Revisiting part 1 we are able to bold our text using the following code:
- Code: Select all
function bold() { Editor.execCommand('bold', false, null); }
Now the common question is what about all the other possible text formats such as italic and underline as well as editor functions to undo or redo a command. We are able to use the pre-defined execCommand function on our Editor element to apply these operations. Please observe the following sample function that will save us time by allowing us to access all operations through the argument.
- Code: Select all
function dowithtext(text) { Editor.execCommand(text,false,null); }
One Function with One Argument vs. Several Functions no Arguments
How do we use this function
- Code: Select all
<a href=#" onClick=dowithtext('bold')">Add Bold</a>
In our coding we will use the following buttons in our WYSIWYG editor:
- Code: Select all
<img src=images/undo.gif" onClick=dowithtext('Undo')" /> <img src=images/redo.gif" onClick=dowithtext('Redo')" /> <img src=images/bold.gif" onClick=dowithtext('bold')" /> <img src=images/italic.gif" onClick=dowithtext('italic')" /> <img src=images/underline.gif" onClick=dowithtext('underline')" />
You can see the example below as to how our editor will look in a browser:
Please feel free to use different buttons, text links, etc... in your editor.
Adding a URL
We will now go over how to add a URL to our WYSIWYG editor. We will be creating a new function that will prompt the user for the URL using the prompt function and again we'll use the execCommand to create the hyperlink in our Editor element. Please check out the following code:
- Code: Select all
function createURL() { var szURL=prompt("Enter a URL:", "http://"); if ((szURL != null) && (szURL != "")) { Editor.execCommand("CreateLink",false,szURL); } }
We can deploy this function through the same method we used for the buttons above. Please see the screenshot found later on in this article to see how our button appears.
Add an Image
We will use the same algorithm for the URL function to create the image in our Editor element. At this time we do not provide a method for users to upload an image; therefore, this is going to allow the user to provide the URL to the image. Please see the following code:
- Code: Select all
function insertimage() { imagePath=prompt('Enter Image URL:', 'http://'); if ((imagePath != null) && (imagePath != "")) { Editor.execCommand('InsertImage', false, imagePath); } }
Buttons for URL and Image Functions
Please see the following code that we'll use for our buttons:
- Code: Select all
<img src=images/link.gif" onClick=createURL()" /> <img src=images/insertimage.gif" onClick=insertimage()" />
Choosing a Font Colour / Add a Colour Pallet
We will now be creating the function that will allow us to apply a color to our font within the Editor element. Please download the following compressed attachment (tar.gz - Unzip through WinRar for Win32 users):
images.tar.gz- Colour Picker with JavaScript and Images Attached. Will need to extract with WinRar for Windows users. Linux users can use "tar -zxvf <filename>" through a Terminal.
- (20.01 KiB) Downloaded 140 times
Please include the JavaScript file from the compressed attachment into the Editor document:
- Code: Select all
<script language=JavaScript" src=jscolor.js"></script>
We can use this library with the following code:
- Code: Select all
<input onChange=Colour(this.value)" />
This element will call upon the Colour function each time we change our focus within the element such as moving the mouse to a different colour will give us the code for that colour. You can see the last screenshot of this part that includes the Colour Picker, Add URL, and Add Image:
Whew! Part 2 has been completed. Please see the following code for what we have up till now:
- Code: Select all
<html> <head> <script language="JavaScript"> window.onload=function() { Editor=document.getElementById('box').contentWindow.document; Editor.designMode= "on"; } function dowithtext(text) { Editor.execCommand(text, false, null); } function createURL() { var szURL=prompt("Enter a URL:", "http://"); if ((szURL != null) && (szURL != "")) { Editor.execCommand("CreateLink",false,szURL); } } function insertimage() { imagePath=prompt('Enter Image URL:', 'http://'); if ((imagePath != null) && (imagePath != "")) { Editor.execCommand('InsertImage', false, imagePath); } } function Colour(colour) { Editor.execCommand("color",false, colour); } </script> </head> <body> <img src="images/undo.gif" onClick="dowithtext('Undo')" /> <img src="images/redo.gif" onClick="dowithtext('Redo')" /> <img src="images/bold.gif" onClick="dowithtext('bold')" /> <img src="images/italic.gif" onClick="dowithtext('italic')" /> <img src="images/underline.gif" onClick="dowithtext('underline')" /> <img src="images/link.gif" onClick="createURL()" /> <img src="images/insertimage.gif" onClick="insertimage()" /> <script language="JavaScript" src="jscolor.js"></script> <input onChange="Colour(this.value)" /> <br/> <iframe width="500" scrolling="auto" height="120" id="box"></iframe> </body> </html>
Please stay tuned for Part 3 of our Create your own advanced WYSIWYG editor tutorial series. We will go into advanced text formatting, discuss browser-compatibility issues with the colour picker, and connecting our editor with the PHP backend.
Thank you all for your time!
Support spread the tutorial :
Digg it
http://digg.com/programming/Create_your ... G_editor_2
Stumble it
http://almsamim.stumbleupon.com/
http://delicious.com/almsamim
