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 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 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" />
<!-- 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;"]

Javascript portion:

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

function def()
function fontEdit(x,y)

Final outcome:

Full article and explanation:

One comment

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s