A dead simple, fast loading, light weight and easy to use html markup editor for your projects. It is the ultimate textarea replacement. It does not use iframes instead it just replaces textarea into an editor where you can insert basic html markup codes like bold, italic, hyperlink, image, blockquote and more..

Much of the inspiration of this editor came from the editor used in wordpress forums. I really loved the simplicity of the editor used there. The reason i kept as textarea editor instead of using iframes (which gives rich html) is because iframe based editors are subjected too many injection attacks.

Features

- Inserts HTML codes in textarea
- No iFrames
- Fast loading and lightweight (code just under 2kb)
- Works on all major browsers
- No popup html window for inserting hyperlinks.
- Easy to integrate
- Inserts quick html code
- Inserts ordered and unordered lists (new feature)

taeditor-demo.PNG

Demo

Download (5kb)

This editor is 100% FREE and feel free to use this editor in your projects or do whatever you want. Please spread word by any means possible.

Note:This editor inserts html code. If you want a same editor, capable of inserting bbcode, you can download free bbcode editor

Free Icons

If you want to customize the editor with new icons you can download silk icons set. It is free!

How to Install

1. Just extract the folder and upload editor folder to your server. All the editor code and images are inside that folder. You should not run any php scripts inside this folder. Any html or php script calling this editor must above and outside this folder

2. Create a PHP script or html page (ex: example.php ) and initialize the editor with the below code.

Starting the Editor

To initialize the editor, you have insert the following lines

1. Place this code inside the of the html page inside head tag.


<script type="text/javascript" src="editor/ed.js"></script>

2. Place this 2 lines of code within the form or wherever you want the textarea editor to appear. The name and id of textarea could be anything, just make sure that both are same.


....
<script>edToolbar('mytxtarea'); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed"></textarea>

.....

Note: Make sure that the id value and the value inside of edToolbar () is same.

If you want multiple instances of editors, on same page


<form name="form1" method="post" action="">
  <p>
    <script>edToolbar('mytxtarea'); </script>
    <textarea name="mytxtarea" id="mytxtarea" class="ed">This is a sample text</textarea>
  </p>
    <p>
    <script>edToolbar('mytxtarea2'); </script>
    <textarea name="mytxtarea2" id="mytxtarea2" class="ed">This is a sample text</textarea>
  </p>
    <p>
    <script>edToolbar('mytxtarea3'); </script>
    <textarea name="mytxtarea3" id="mytxtarea3" class="ed">This is a sample text</textarea>
  </p>

  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

The default height and width of text area is specified in styles.css. It is 400px width and 150 height. You can open styles.css and modify the width and height of text area.

Frequently Asked Questions

1. How do i customize the editor with stylesheet?

It is easy to customize the images and editor with stylesheet. Just change stylesheet code in styles.css

2. Images does not appear or does not load.

There could be a problem in the path of images the editor relative to your PHP script. Just place the bbeditor folder below / assuming that php script is in /example.php and the editor is /bbeditor/images

if you want to manually change the path of images, open ed.js and you will need to change lines like this indicating the correct path of images.


document.write("<img class="button" src="editor/images/bold.gif" name="btnBold" onClick="doAddTags('<strong>','</strong>')">");
.....

3. How do i load the data stored in database to the editor for editing?

This is a very important question. Suppose you have inserted the content with bbcodes to the database but what if you want to make changes to the content. You might want to pull the content from database and load it in editor to make editing and changes to it. In that case you will need to output the javascript initialization with php. In this way you will load the content when the editor starts.


<form name="form1" method="post" action="">
  <p>
<script>edToolbar('mytxtarea'); </script>
<textarea name="mytxtarea" id="mytxtarea" class="ed">//PHP CODE HERE//</textarea>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>

Disclaimer: use of this script is at your own risk.

You can also discuss about this script in my forum. Although i cannot provide support because of my busy schedule, i would be happy to discuss in the forum.

Scripts.com

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • BlinkList
  • blogmarks
  • del.icio.us
  • digg
  • feedmelinks
  • Furl
  • Fleck
  • MyShare
  • NewsVine
  • Netscape
  • Slashdot
  • Spurl
  • StumbleUpon
  • Taggly
  • Technorati
  • Wists
  • YahooMyWeb