In this post I suggest you to try five free WYSIWYG editors for your web-based applications that transform simple textarea HTML elements into powerful and useful rich text editors. I also provide simple instructions to implement quickly these editors in your web pages.

The Yahoo! Rich Text Editor is a UI control that replaces a standard HTML textarea and is based on Yahoo! UI Library; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. Implement this editor in your web site is very simple. You have to add a simple textarea like this:

Then, to activate the editor copy and paste the JavaScript code you find in the related pages on Yahoo Developer Network.

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control that has the ability to convert HTML <textarea> fields or other HTML elements to editor instances. TinyMCE is lightweight, browser friendly, very easy to integrate into other Content Management Systems and fully customizable with themes and plugins. This editor can be integrated in your website only with a few lines of code. Add this code into the tag of your page:

To initialize the editor use the code you can find here (View Source link). Than add a simple text area in your page like this:

NicEdit is a WYSIWYG editor for websites. Its goal is to be as simple and fast as possible for users of your application. NicEdit is extremely lightweight and can be easily integrated in any site with minimal impact while providing visitors an effective means to express themselves in rich text. To include NicEdit in your page you have only add the following two lines of code and all textareas on the page will be converted to nicEditors:

CKEditor is a powerful WYSIWYG editor that brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. Because CKEditor is licensed under flexible Open Source and commercial licenses, you’ll be able to integrate and use it inside any kind of application. This is the ideal editor for developers, created to provide easy and powerful solutions to their users.

openWYSIWYG is the ultimate WYSIWYG editor for your web-based applications and forms that’s packed with every rich-text editing feature you need to make your content management system that much better. Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text. Setting up openWYSIWYG is so easy, you can quickly turn any <textarea> into a powerful WYSIWYG editor with just a few simple lines of code. The only thing you have to do is to include the following line of code in your web pages:

With this post I want to start a new cycle of lessons dedicated to jQuery after a lot of requests I received in the past weeks from many readers about this topic. In particular this article is an introduction to jQuery Selectors and illustrates how to start using them with simple practical examples. In the next articles I’m going to add more detailed information and tutorials in order to cover every aspect about Selectors and their usage. For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Introduction to Selectors

jQuery selectors allow you to get quickly one or more elements in the Document Object Model. Selectors are classified in Basic, Hierarchy, Basic Filters, Content Filters, Visibility Filters, Attribute Filters, Child Filters, Form, Form Filters. In the following paragraph we’re going to see how to use some Basic Selectors, Attribute Filters, Basic Filters and Content Filters.

Basic Selectors

Basic Selectors are the most simple way to get a single element or group of elements with jQuery. You can get a single element with a specific #id and set the html content with “Hello World!” in this way:

The following code allows you to get all elements contained into the element with ID #section and sets, for each matched element, the CSS background property to the value #D1D1D1.

You can do the same thing using a CSS class selector. Here is the code that gets all elements with the attribute class with the value mylist and sets the CSS background property to #D1D1D:

Here is a very simple example of code that gets on click event the element with ID #my-paragraph, sets the html content to “Hello World” and color property to #444:

Attribute Filters

Attribute filters allow you to get elements with a specific attributes. The syntax is simple: $("element[attribute]"). The following code get all

elements that have the attribute #ID specified and sets on click event the html content to “Paragraph with ID attribute!”.

This code finds instead all element that have the attribute class not with the value “intro”.

Another useful is access to: Finds all inputs with a href attribute that contains a part of text (in this example the URL of my blog ‘woorkup.com’) and sets the value of the attribute class to .mysite.

Basic Filters

Basic filter are useful to access one or more elements with several criteria, for example the first or last element of a DOM element, odd or even elements, a single element by its index and so on.

:first and :last – :first and :last allow you to get to the first and last element of a specific DOM element. For example you can get easily the first an last element of a

list with a specific ID in this way. This is the html code for the list:
• Item A
• Item B
• Item C
• Item D

Here is a simple code that gets the first item of the list with id #t-myul-1 and sets the CSS color property with the value #0033CC. Then the code gets the last list item and sets the attribute class to last:

$("#t-myul-1 li:first").css("color", "#0033CC");
$("#t-myul-1 li:last").addClass("last");


And this is the CSS class .last:

.last{
background:#0033CC;
color:#FFF;
}

Here is the result (See the demo):


Simple Vertical Scroller – :first and :last are very useful to implement a simple vertical or horizontal scroller. The following example describes you how to develop a simple vertical scroller in one minute using an

list and just some lines of JavaScript code. This picture illustrates how the scroller works:



Here is the html code for the list:

• Item 1
• Item 2
• Item 3
• Item 4

Scroll up


This is the result in a web browser:



The element Scroll up allows you to scroll up the list on click event. Here is the JavaScript code for jQuery to scroll up the list:

$(document).ready(function() {
$("span[name='scroll']").click(function scroll_up(){
first = $("#t-myul-2 li:first");
last = $("#t-myul-2 li:last");
first.clone(true).insertAfter(last);
first.remove();
});
});


The previous code can be easily reused and customized with a little effort to implement advanced vertical or horizontal scrollers with more complex effects and animations. See the demo.

:even and :odd – :even and :odd get even and odd elements. A typical situation in which these filters are useful is when you want to highlight with different colors even and odd items of a list. Image to have the following list with #id t-myul-3:

• Item A
• Item B
• Item C
• Item D

Define two CSS classes .even and .odd to highlight even and odd elements in your list:

.even{background:#EFEFEF;}
.odd{background:#FFF;}


Here is the JavaScript code for jQuery to highlight with different colors even and odd list items:

$(document).ready(function() {
$("#t-myul-3 li:odd").addClass("odd");
$("#t-myul-3 li:even").addClass("even");
});


The first line of the previous code $("#t-myul-3 li:odd").addClass("odd") gets all odd list items within the element with id #t-myul-3 (in this example an unordered list) and add to each given element the CSS class .odd. And here is the result (See the demo):



Content Filters

Content Filters allow you to get elements by their content. This example illustrates how to highlight one or more list item containing a specific text (in this case “Woork Up”). This is the

list with ID #t-myul-4:
• Mashable
• Smashing Magazine
• Woork Up
• Noupe

This is the CSS code I used to define the class .highlight:

.highlight {
background:#FFC;
}

And here is the Javascript code for jQuery:

$(document).ready(function() {
$("#t-myul-4 li:contains('Woork Up')").addClass("highlight");
});

Here is the result:


You can also use :contain combined with :even and :odd in this way:

$(document).ready(function() {
$("#t-myul-4 li:even").addClass("even");
$("#t-myul-4 li:odd").addClass("odd");
$("#t-myul-4 li:contains('Woork Up')").addClass("highlight");
});

And here is the final result (See the demo):



Conclusions

In this post we’ve started learning how to use some jQuery Selectors that allow you to move first steps with jQuery. In the next articles I’m going to cover every aspect about Selectors and their usage. For a list of all available Selectors take a look at the official jQuery Documentation. If you are a developer I suggest you to download my jQuery 1.3 Visual Cheat Sheet. Comments and suggestions are appreciated.

For the launch of my Woork Up I prepared this CSS2 Visual Cheat Sheet a useful and practical reference guide to Cascading Style Sheets Level 2 for web designers and developers. This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find at a glance everything you are looking for.

Scribd Version