Welcome to the first of our six part tutorial on how to "create your own advanced WYSIWYG editor". The goal of these tutorials will be to show you how to create the editor, add functionality to the editor, and implement the editor into a real-world scenario such as submitting the HTML to a PHP backend script with safe HTML
Let's Begin
WYSIWYG?
While this question is a little far-fetched we need to identify what we consider a "What you see is what you get" editor consists of as it may be different from another person's definition. In this series of tutorials we are going to create a WYSIWYG editor that will be based in an iframe with functions that are similar to popular word processors such as bold, underline, and italics to name a few. We want to give a unique perspective at how a WYSIWYG editor is formed in HTML using JavaScript as this will allow our audience to create new, unique ideas from this tutorial series.
Recommendation: We recommend that you have a proficient knowledge of HTML and JavaScript as this is what we'll be using in our examples. If you don't have this level of knowledge, you can certainly read through and attempt the examples.
ExecCommand
This is the function that we'll be using throughout our series of tutorials. execCommand is used in the following syntax:
- Code: Select all
variable=object.execCommand(sCommand,bUserInterface,vValue)
sCommand - This is the operation we're going to apply to vValue. You can see a list of commands by visiting this website.
bUserInterface - True/False argument. Typically set to false if we're referencing the element via assignment (ex: editor.execCommand(...); modifies editor element)
vValue - We could designate the element to be modified in this argument.
A side-note the element must have designMode set to On in order to be manipulated by execCommand:
- Code: Select all
object.designMode=on';
Setting up our editor
The next part of this tutorial will be to create the HTML that will house our WYSIWYG editor. We are going to use an iframe to which has been around for such a long time and it provides us an element that we can turn on designMode. Please see the following example of code:
- Code: Select all
<html><head><title>WYSIWYG editor</title></head> <body> <iframe width=500" height=120"></iframe> </body></html>
We have successfully created an element referenced as box that we can use as our editor; however, we need to add the following code within our <head></head>:
- Code: Select all
<script type=text/javascript"> window.onload=function() { Editor=document.getElementById('box').contentWindow.document; Editor.designMode=on'; } </script>
You can see the screenshot shown below that we are now capable of editing the iframe's content:
Our First Function
We have a nice editing area now; however, we are missing functions to apply to our text. The first function we will create is the bold function. In the following code snippet we will create a bold function that modifies the Editor element to bold the highlighted text in the iframe:
- Code: Select all
function bold() { Editor.execCommand('bold', false, null); }
With the function created we need a method to activate the function; therefore, we add the following button above our editor:
- Code: Select all
<input type=button" onClick=bold()" value=Bold">
The end result of our coding is shown in the following screenshot:
Through this example you can create functions to perform any command mentioned here.
This concludes the first part of this six part series. Please stay tuned for the second part of the tutorial that will go into eliminating multiple functions that you might have if you created a function for each command.
Thank you for your time and remember to reply if you have a question or suggestion.
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
