Simple Rich Text Editor


I am working on creating a simple rich text editor with basic jquery functions.Everyone use Tinymce which is the famous plugin  based on Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB.

I tried to make our own text editor that can be easy to alter. I made my project with simple jquery functions as this


I will explain my project in three Simple steps


Final Result.

First analyse the required fields you want to add to your text-editor. Lets add the basic functions like [Bold] B ,[Italic] I , [Underline] U,

S1: Add 3 buttons in html file

<button id=”bold”><b>B</b></button>

<button id=”italic”><i>I</i></button>

<button id=”underline”><u>U</u></button>

S2: Add a text area.

<textarea id=”custom_txt”></text>

S3: Add script.

(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];‘toggleclicked’, 0); {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
return this;

$(‘#bold’).clickToggle(function() {

}, function() {

$(‘#italic’).clickToggle(function() {

}, function() {

$(‘#underline’).clickToggle(function() {

}, function() {

S4: Run the output now


Will be updated soon…


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