JavaScript: create a basic text editor for textareas

Tweet

In this post I will explain how to create a very basic editor to be used for textareas. And we are going to create it using JavaScript.
I won't write down all the code, for every single possible function, however the example will be the basic structure which you can then use for whatever you might need.
First of all, some assumptions:
1) in your page there's a form and a textbox (wow that was easy!);
2) the text in the textarea is submitted to your database with html tags that are then rendered when the text is displayed in other pages.

The code

Add the following function in the head of your document:

<script type="text/javascript">
function ins_tag(tag_s, tag_e) {
   var ta = document.getElementById("the_textbox");
   if (document.selection) {
      str = document.selection.createRange().text
      document.selection.createRange().text = tag_s + str + tag_e;
      document.form1.the_textbox.focus();
      return true;
   }
   else if (ta.selectionStart) {
      var startPos = ta.selectionStart;
      var endPos = ta.selectionEnd;
      var str = ta.value.substring(startPos, endPos);
      ta.value = ta.value.substring(0, startPos) + tag_s + str + tag_e + ta.value.substring(endPos, ta.value.length);
      document.form1.the_textbox.focus();
      return true;
   }
   else {
      return false;
   }
}
</script>

This function will use two parameters (tag_s and tag_e) which will determine what to put in your textarea. Said that, you may understand that we can then pass to the function whatever we like. The function will add the passed parameters around the selected text or, if nothing's selected, where the cursor is.

The buttons

Create your form (form1), and inside it the textarea. Just before it, put a small icon that will make the text bold when pressed. Something like:

<img src="../images/icons/bold.png" alt="Bold" width="24" height="24" onclick="ins_tag('<span style=&quot;font-weight: bold;&quot;>', '</span>');">

Remember to use an appropriate button and to change the src according to the position of your image.
Just for the sake of completeness, you can use a simple button to obtain the same effect. But... an icon will look more professional.
As you can see, there's an onclick event attached to the icon. The event will trigger the JavaScript function (ins_tag) passing two parameter (the starting tag and the ending tag). The tag is a <span> with a style (font-weight: bold;).

The textbox

Just after your button, place the your texbox (the_textbox) like this:

<%
dim my_text
my_text = (rs.Fields.Item("the_textbox").Value)
%>
<textarea id="the_textbox" name="the_textbox" cols="80" rows="35" wrap="PHYSICAL"><%= Server.HTMLEncode(my_text) %></textarea>

Ok that needs some explanations.
We assume you are updating a text retrieved from a table. That explains the rs.Fields.Item part. If your form is used to insert the text into a table, you can skip that part. I wanted to show it, because what matters here, is the Server.HTMLEncode part. We are actually showing the text without "rendering" the html tags inside it.
The textarea has an id and a name. Please, don't forget them.
The form where the textarea is, has name="form1"; otherwise the focus() won't work. We use the focus() to keep the cursor inside the textarea after clicking the icons.

Done? Done!

If you click on your icon, after selecting part of the text, the selected text will be surrounded by the tags necessary to make the text bold. If you do not highlight some text, the tags will be placed where the cursor is, inside the textarea. Simple as that!

Want more?

It's up to you. You can pass different parameters: for example you can create an Italic icon, or Underline or whatever you like (in my page I made bold, italic, highlighted, carriage return insert...).

I hope you enjoy this. And let me know your thoughts in the comment section.

Note: I found the original code somewhere on the net a long time ago. I've changed it to my needs, but I cannot credit the first developer here, because I don't know who he/she is.  If it's you, just let me know, please!