This is the third of the six part tutorial explaining how to create your own advanced WYSIWYG editor. In this chapter we will go into explaining how to handle problems with IE and our color problems; in addition, we will also add the justify to our editor, and we'll end with a hidden input element that we'll pass to our PHP backend.
Let's Begin
Colour problems with IE
Every almsamim (web developer) goes through the tribulations of creating a website that works with IE. The other browsers for the most part do not cause an issue as they'll follow the designated standards created. This blurb of the tutorial will face one of the IE problems relating to the colour picker as seen in the screenshot provided:
Thankfully IE has a proprietary condition that allows us to alternate between the code that works for other browsers to code that works specifically for IE. Please see the following example:
- Code: Select all
<!--[if IE]> <img src="images/color.gif" onClick="Colour(clr.value)" /> <![endif]-->
The IE end-user will now we able to choose the colour initially and then click on colour image to modify the font colour of our selected text as seen in the following screenshot:
Adding alignments to our editor
As we have done with the previous functions as seen in Part 2 we will just have to add the following buttons to our list of buttons defined:
- Code: Select all
<img src=images/justifyleft.gif" onClick="dowithtext('justifyleft')" /> <img src="images/justifycenter.gif" onClick="dowithtext('justifycenter')" /> <img src="images/justifyright.gif" onClick="dowithtext('justifyright')" />
Adding an unlink button (an extra tip)
This was not mentioned in our introduction, but this is for you that read through the tutorial. The following sample of code will allow you to unlink URLs:
- Code: Select all
<img src="images/unlink.gif" onClick="dowithtext('Unlink')" />
Please feel free to check out the following list of commands that you can create for your editor: List of Commands. If you have problems with the commands then reply to this thread and we'll help you solve your problem!
Submission of Text
Once we've completed our editing the most important part comes into action, submission. We need to be able to send the content that we've generated to a location to be saved. We will create a new function that will allow us to retrieve the content from our iframe:
- Code: Select all
function Gettext() { var text=document.getElementById('text'); text.value=Editor.body.innerHTML; }
In addition to the JavaScript added we will need to add a hidden element and a submit button to our HTML form.
- Code: Select all
<input type=hidden" /> <input type="submit" onClick="Gettext()" />
Accessing the text in PHP
If you are familiar with PHP then you know that we can access POST data easily. If you're not familiar follow this example:
- Code: Select all
<?=$_POST[text]?>
Recap on our Editor
- 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("forecolor",false, colour); } function Gettext() { var text=document.getElementById('text'); text.value=Editor.body.innerHTML; } </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/unlink.gif" onClick="dowithtext('Unlink')" /> <img src="images/insertimage.gif" onClick="insertimage()" /> <script language="JavaScript" src="images/jscolor.js"></script> <input onChange="Colour(this.value)" /> <!--[if IE]> <img src="images/hv120x69.png" width="20" height="20" onClick="Colour(clr.value)" /> <![endif]--> <img src="images/justifyleft.gif" onClick="dowithtext('justifyleft')" /> <img src="images/justifycenter.gif" onClick="dowithtext('justifycenter')" /> <img src="images/justifyright.gif" onClick="dowithtext('justifyright')" /> <br/> <iframe width="500" id="box" name="box" height="120"></iframe> <br /> <form action="php.php" method="post"> <input type="hidden" /> <input type="submit" onClick="Gettext()" /> </form> </body> </html>
images.tar.gz- copywriting / formatting
- (20.01 KiB) Downloaded 131 times
Thank you for your time and remember to reply if you have a question or suggestion.
[b]Stay tuned forPART 4!!
[/b]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
";
";
