Simple Rich Text Editor

Hi,

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

Rich-text

I will explain my project in three Simple steps

STEP-I

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];
this.data(‘toggleclicked’, 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));

$(‘#bold’).clickToggle(function() {
$(“#custom_txt”).css(‘font-weight’,’bold’);

}, function() {
$(“#custom_txt”).css(‘font-weight’,’normal’);
});

$(‘#italic’).clickToggle(function() {
$(“#custom_txt”).css(‘font-style’,’italic’);

}, function() {
$(“#custom_txt”).css(‘font-style’,’normal’);
});

$(‘#underline’).clickToggle(function() {
$(“#custom_txt”).css(‘text-decoration’,’underline’);

}, function() {
$(“#custom_txt”).css(‘text-decoration’,’none’);
});

S4: Run the output now

STEP-II

Will be updated soon…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s