December 18th in Javascript by pbu .

Free Markup TextArea HTML Editor in Javascript

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)

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>

4. How do i add this editor to wordress comments form?

Glad you asked! It can be done easily. see this page

5. Where can i find more icon sets to use with this editor?

Note that because of copyright issues, i havent used the icon sets created by others in this editor. That is why i created my own editor icons (may not the best but good to go). I have seen many many open source icons and you can find them this page.

7. Is there any license to remove copyright on this script?

yes, you can remove the copyright in this script to use this editor in your projects. There is a one time $30 fee copyright removal fee. You can use this payment link. This small money will help me to buy a movie ticket.

This grants you unlimited license including removing copyright and use this script in your commercial projects. I do not provide support with this script.

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.

Enjoy the editor!

Our 650-621 practice questions are more then simple 70-236 test prepared to help you assess your real knowledge for 70-270 exam.

51 Comments

Costin
December 19, 2008

If this one will be easy to edit(extend) I think I have some plans for it!

Great job man!
Reply
Costin
December 19, 2008

When you click on the add image or link and you select cancel, the link tags or image tags are still inserted in the textarea.

a quick fix:

function doImage() {
var url = prompt('Enter the Image URL:','http://'); if (url) { if (document.selection) { textarea.focus(); var sel = document.selection.createRange(); sel.text = '[img]' + url + '[/img]'; } else { var len = textarea.value.length; var start = textarea.selectionStart; var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end); var rep = '[img]' + url + '[/img]'; textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len); } } }

the same for the doURL function.

hth
Reply
pbu
December 19, 2008

Thanks costan. I spotted the bug. I fixed it now.
Reply
Steve
December 23, 2008

Great editor, thanks. How would you go about adding a bullet and numeric list? I assume one is similar to the other, but if not please correct me. I understand the functionality of adding tags before and after selected text, but in the case of lists, there are multiple items to be tagged. Can you post some suggestions? Thanks again.
Reply
Korri
December 25, 2008

Hi,

I like this simple editor, but I have a problem with “WYSIWYG”, you can’t call it like that…
A WYSIWYG is an editor where you can see the result in the textarea, and this is not the case with this one…

But goo job guy !
Reply
Juan Pablo Barrientos Lagos
December 26, 2008

Sorry, wordpress has deleted my labels example.

Good job, but this textarea editor not generates well formated xhtml output. This could be a great editor if you can revert this. Go ahead.

Regards,

Juan Pablo
Reply
Juan Pablo Barrientos Lagos
December 26, 2008

your editor generate a BR instead P (paragraph). That.
Reply
Chris
January 10, 2009

Hey,

First of all, this is exactly the editor I was looking for!

I do have one problem however…
I try to load content from my database as you described (echo the javascript through php) But still it doesn’t work.
I discoverd this is because of line breaks in the content. I tried to strip_tags from my content and than str_replace all \n with but still it won’t initialise the textarea…
Do you have any idea what i can do?
Thanks!

Greetz,
Chris
Reply
pbu
January 10, 2009

i think you have to escape any special characters instead of str_replace. Try it!
Reply
Chris
January 11, 2009

Ok, but how do I do that?
Reply
tom
January 16, 2009

Hi, we are using your script on features.opensuse.org to edit the richtext fields. It’s very useful, thanks!
We patched it to work with multiple textareas on the same page, and added some more icons.
Diff:

10c10

15,23c14,22
‘,’‘)\”>”);
‘,’‘)\”>”);
‘,”)\”>”);
“);
“);
‘,’‘)\”>”);
‘,’')\">");
---
> function Init(obj_id,obj_name,width,height, val) {
>
> document.write("','')\">");
> document.write("','')\">");
> document.write("','')\">");
> document.write("");
> document.write("");
> document.write("','')\">");
> document.write("','')\">");
25,29c24,29
");
document.write("");
>
> textarea = document.getElementById(obj_id);
> textarea.innerHTML = val;
> }
>
60c60
function doURL(area)
63a64,65
> if (url == null) return;
> var textarea = document.getElementById(area);
66d67
function doAddTags(area, tag1,tag2)
106a108
> var textarea = document.getElementById(area);
Reply
tom
January 16, 2009

oops, the diff got destroyed by the blog…
Can see the changed script here:
https://features.opensuse.org/javascripts/ed.js
(needs opensuse login)
Reply
pbu
January 16, 2009

yeah! saw that tom! good to know my work used in opensusse! enjoy the script.
Reply

Ers
January 23, 2009

sorry for my English.
I have the same problem of Costin
this is my solution:

function doURL()
{
var sel;
var url = prompt('Inserisci URL del link:','http://','target');
// change Eros
// ask if in the same window or in new window
//
var openNew = confirm('Vuoi che il LINK si apra in una nuova finestra?\n\nOK = Apre in una NUOVA finestra\nCancel = Apre in QUESTA finestra');
  if(openNew)     {
    target = "blank";
  } else {
    target = "self";
  }
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

    if (document.selection)
            {
                textarea.focus();
                var sel = document.selection.createRange();

                if(sel.text==""){
                    sel.text = '<a href="' + url + '" rel="nofollow">' + url + '</a>';
                    } else {
                    sel.text = '<a href="' + url + '" rel="nofollow">' + sel.text + '</a>';
                    }
                //alert(sel.text);

            }
   else
    {
        var len = textarea.value.length;
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;

        var sel = textarea.value.substring(start, end);

        if(sel==""){
        sel=url;
        } else
        {
        var sel = textarea.value.substring(start, end);
        }
        alert(sel);
        var rep = '<a href="' + url + '" rel="nofollow">' + sel + '</a>';;
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
        textarea.scrollTop = scrollTop;
        textarea.scrollLeft = scrollLeft;
    }
}

pbu
January 24, 2009

UPDATE: i fixed the problem of loading data within the editor. Now you can directly embedd php code inside textarea of editor to load data from database.

I struggled a number of days to fix this and changed the editor initialisation type and solution was surprisingly simple.

Enjoy!
Reply
Ers
January 24, 2009

With this data don’t crash:
echo “Init(\”obj\”,460,50,\”". str_replace(‘”‘,’`',$text) .”\”); “;

How is it possible to use more than one EDITOR in the same webpage?
When I click an icon, the TAG is inserted in the last EDITOR of the webpage. I need three EDITOR in the same page. Thank you!
Reply
pbu
January 26, 2009

UPDATE: This editor as of v1.3 now works in multiple instances on same page. Thanks Ers!
Reply
Alirius
March 4, 2009

Hi There Balakrishnan!
I’ve see you’ve don’t give a email for contact with you,so ill ask here.
Can I get Your permission for edit and you this software of your.I’ve really need a response from you.
Thank You

With Big Respect,
Alirius.
Reply
pbu
March 4, 2009

yes, you are free to modify the script as you wish. Just dont remove the copyright.
Reply
Alirius
March 4, 2009

No i won’t remove it,ill put link to here to can and other people to use this great script, thank you again.Have a nice day.

With Bi Respect,
Alirius
Reply
Dendro
April 20, 2009

Can I make some more buttons based on yours? I really need , , and so on.
PS. Great editor.
Reply
Dendro
April 20, 2009

Ups. Something went wrong. Here`s that missing part …[P], [CENTER], [HR]…
Hope it will work now.
Reply
pbu
April 20, 2009

go ahead! no problem.
And of the errors, just make sure you have closed html tags.
Reply
swapcoll
April 27, 2009

well, my client is kinda dumb (pardon the offense – I mean an non-internet savvy person) and I’m still not very sure if he’ll be able to use it properly.

anyways, thanks for this wonderfully simple code!
Reply
Eric
May 28, 2009

How would one go about adding more html tags in the editor?
Reply
David
June 8, 2009

This WYSIWYG program is like many others I’ve found. Nice but does not have the one feature that most Web developers are looking for in a textarea WYSIWYG editor replacement program.

What it is lacking is the ability for a user to include an image in their content.

This program was likened to WordPress, but in WordPress I can easily include a picture in my article. The main image is uploaded and a thumbnail image is automatically created and included in the article where the author placed it. It is also automatically linked to the larger image.

So this program is similar to WordPress only in the respect that it can make words Bold, Italicized, etc. While it does have an image button, it is nothing more than you linking to an existing image on the server or Web. In fact, it could be considered to a device to aid a user to “Hotlink” (steal bandwidth from other websites).

This type of Image linking should be illegal in my opinion. If a WYSIWYG editor is going to have an image device, it should be one that uploads an image to that server and links to that image only on that server.
Reply
pbu
June 8, 2009

hi david,

What you are suggesting is easy to implement. All you have to do is first upload the file, get the file path and pass it to the editor url variable to insert the image.
Reply
Andrew
June 30, 2009

This looks good.

However, although my buttons are controlled by the stylesheet, the textarea ignores it.

This is on a Linux (Ubuntu) server. I had to modify the image paths for the buttons slightly. Anyone got any ideas?
Reply
Andrew
July 3, 2009

Have resolved my own problem, caused by my sloppy use of names. All works lovely now.

I have added a button. This is the only way I know to stop the text clumping together like unstirred porage. Very conveniently it only took a couple of minutes to edit the B gif to P using The Gimp.

Thanks again for a super bit of software.
Reply
Andrew
July 3, 2009

re previous entry, it was a Paragraph button. my para html tag was of course clipped out by the machinery.
Reply
neged
July 21, 2009

You’re my hero!!

Where’s the donate button lol?
Reply
- Alejandro
  July 14, 2010
  
  I say the same!!! You are the best, doesnt matter if is simple, but its functional!!!
  
  Thanks a lot!!!
  Reply
Scott
July 30, 2009

This is a great and dead easy editor to add to my site. I am having trouble adding “smiles”. It’s a two-step process where the user would click a single button to cause a pop-up window, and then clicking on that pop-up will cause text to be inserted in the textarea.

Any thoughts on how to add this functionality?

Thank you.
Reply
Brad
September 7, 2009

Scott – All you have to do is code a jump/drop menu with the images you want instead of the popup window to display your options. Then, use the same processing form for posting the code to your textarea.

That will make your editor a little more streamlined and keep it in one window.
Reply
dana
September 24, 2009

i am not able to add youtube video out of the box…how do i modify the code to support it?
Reply
Dhini
October 23, 2009

Work also on WordPress?
How?
Reply
- pbu
  December 21, 2009
  
  All that is needed is a wordpress plugin to replace the existing tinymce editor. I will soon find some time or other to write the plugin. Thanks again!
  Reply
sartas
November 8, 2009

I was a little improved list tags and changed installation

installation:

<body onload = "edToolbar('textareaId')">

or

<script type="text/javascript">edToolbar('textareaId')</script>

before close tag </body>

Multiple instances of editors, on same page: edToolbar(‘all’)

and place css link in the head
<link rel='stylesheet' href='ed.css' type='text/css' />

demo
download
Reply
ehgraphix
July 24, 2010

can you add color picker and font size
Reply
Annie17
July 26, 2010

Hi,
I use an editor online, very funcional and free.
Try http://www.online-html-editor.net , its free and simple to work on it.
Reply
mazda
December 7, 2010

nice code
Reply
Golf Irons on Sale
December 11, 2010

Hi! Would you mind if I share your blog with my myspace group? There’s a lot of people that I think would really enjoy your content. Please let me know. Many thanks
Reply
Neetu
December 30, 2010

Hi,
Can this editor be used with dynamically loaded textareas . with Jquery I am creating textareas but the WYSIWYG editor is not attaching events on these textareas . Any clue ?
Thanks
Reply
g4r3th
February 25, 2011

Very easy to use html editor much better to use than dreamweaver, thanks
Reply
lodp
June 15, 2011

Very nice — but as someone pointed out, calling it WYSIWYG is a bit misleading. Actually it’s WYSIH – what you see is HTML
Reply
Helen Neely
August 2, 2011

Thanks for this HTML Editor, I think it will come in very handy for one of the CMS project I’m working on.
Reply
notnoobie
October 28, 2011

Simple and great!
I found this page in 2010 and the code showed me the way i needed. Now I use a derivated code for my projects.
Thanks a lot!
Reply
mrsa
November 1, 2011

Hi, I want to use your script in my websitemakerscript, in development, an the last I’m planning to sell through the internet. What about the copyright of your script and such? Is it sufficient when I don’t remove your copyright-lines and nothing more?

Hope to hear from you!
Best regards
Reply
- pbu
  November 1, 2011
  
  yes, it is sufficient if you dont remove copyright line. if you want remove, there is a small fee. contact me.
  Reply
  - mrsa
    November 1, 2011
    
    Thankyou! Could you please send me the details in order to remove the copyright-stuff? I could pay through paypal. My emailaddress you can find in my guestbookentry.
    Reply
    - pbu
      November 1, 2011
      
      my email is listed here: http://corpocrat.com/contact/
      
      please send an email.
      Reply