In this article i will show you how to create a simple javascript editor that inserts some content into a text area, in my case bbcode. Its sole purpose its to make using bbcode easier for the end user. It isnt a WYSIWYG Editor!
The first and most important part is the text area, this is done in the normal way.
The ID is very important as it is what javascript uses to interact with text area, i have used “editor” as the ID for this text area.
Instead of writing loads of functions like “bold()” and “underline()” i wrote one function called “addtags” which has 2 paramaters “string” and “id”. This is the function:
function addtags(s,id){
var editor = document.getElementById(id);
editor.value+=s;
editor.focus();
}
The next step is to create the links that insert the tags. Lets start with the basics, bold tags, this is done simply by creating a link to “javascript:addtags(‘[b]text[/b]‘,’editor’)”. This then inserts the text “[b]text[/b]” into the text area.
I also expanded this idea to allow for popups when click the links, mainly so that instead of inserting “[img]url[/img]” it would popup and ask for the url and put it in for you. to do this you need to make a link that looks like this:
Image
Thats about it for the editor. Im going to compile a few techniques together for a much better version thats allot easier to use and is more than just a substiture for not bieng able to remeber bb code
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.