Rich text editor using Javascript


Creating a rich text editor using HTML & Javascript is very simple to do. For the code below it uses an <iframe> to create a textbox, and I have included choosing font, font color, font style, indentation, and left-right-center justification functions. You are free to add any other functions you would like or your own css styles as well. In terms of the Javascript code, we have a def() function that gets loaded at the very beginning of the <body> that initializes the controls. As well as various other parts inside the <script>.

HTML portion

<body onLoad="def()">
<div style="width:500px; text-align:left; margin-bottom:10px ">
<input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" />
<input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" />
<input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" /> |
<input type="button" style="height:21px; width:21px;"value="L" title="align left" />
<input type="button" style="height:21px; width:21px;"value="C" title="center" />
<input type="button" style="height:21px; width:21px;"value="R" title="align right" /> |
<select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<select id="size">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="color">
<option value="black">-</option>
<option style="color:red;" value="red">-</option>
<option style="color:blue;" value="blue">-</option>
<option style="color:green;" value="green">-</option>
<option style="color:pink;" value="pink">-</option>
</select> |
<input type="button" style="height:21px; width:21px;"value="1" title="Numbered List" />
<input type="button" style="height:21px; width:21px;"value="ā—" title="Bullets List" />
<input type="button" style="height:21px; width:21px;"value="ā†" title="Outdent" />
<input type="button" style="height:21px; width:21px;"value="ā†’" title="Indent" />
</div>
<!-- An iframe is where the text will be written and edited, PLEASE replace the square brackets with <> -->
[iframe name="textEditor"  style="width:500px; height:170px;"]
[/iframe]
</center>

Javascript portion:

<script type="text/javascript">
textEditor.document.designMode="on";
textEditor.document.open();
textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style></head>');
textEditor.document.close();

function def()
{
   textEditor.document.getElementById("fonts").selectedIndex=0;
   textEditor.document.getElementById("size").selectedIndex=1;
   textEditor.document.getElementById("color").selectedIndex=0;
}
function fontEdit(x,y)
{
   textEditor.document.execCommand(x,"",y);
   textEditor.focus();
}
</script>

Final outcome:
99

Full article and explanation: http://www.geekpedia.com/tutorial198_Creating-a-Rich-Text-Editor-using-JavaScript.html

Advertisements

One thought on “Rich text editor using Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s