Gmail Rich Text Editor

1. Font face selection is triggered via an icon rather than displaying all font faces. Default font face is indicated as "Normal."

2. Relative font sizes are used rather than numerical.

3. Color selection control for font color and background/highlight color.

4. Link creation dialog.

5. Selected text shown as link. When links are selected controls are displayed in the editor to modify the link.

6. List controls are displayed, toggled on when active.

7. Running spell check highlights misspelled words.

8. Composition form displayed in context of page.

Google have been doing some work getting some of their interfaces to be consistent with each other. GMail and Blogger now provide similar interface behaviors and controls, with slight differences. Other applications like Google Sites and Docs continue to have different controls.

Gmail and Blogger are among the simplest of these text editor interfaces, for good reason. In blogs and email, rich text formatting should be bare bones and out of the way as much as possible. Google is successful in understanding the differentiation in these use cases from text editing in wiki/site and word processing. The controls are intuitive and usable.

URL

gmail.com

Comments

Anonymous
10/14/08 07:35

where to download the source code for this editor? can send to me? wooo.jackie@gmail.com thanx

jibbajabba
10/14/08 10:15

This is the editor that comes with GMail, so you can't download it as is. But GMail is built on Google's Web Toolkit which is available for free. The Widget Gallery has examples for creating rich text editor features.

Anonymous
02/01/10 04:51

where to download the source code for this editor? can send to me? happvivek@gmail.com thanks

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.

Homepage:

Comment: *

Input format

Filtered HTML

Allowed HTML tags: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <small> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike>
Web page addresses and e-mail addresses turn into links automatically.
You can use Mediawiki syntax. It is possible that not all formatting options are supported at the moment.
Links to other pages: [[Page Title]] or [[path/to/page|Title]].
External links: http://example.com or [http://example.com some link title].
Interwiki links: [[site:Page Title]].
You can use the following interwiki links: path, gdo, wp
Images are included with [[Image:name]]. (wikipedia help)

Wiki Editing

You can use Mediawiki syntax. It is possible that not all formatting options are supported at the moment.
Links to other pages: [[Page Title]] or [[path/to/page|Title]].
External links: http://example.com or [http://example.com some link title].
Interwiki links: [[site:Page Title]].
You can use the following interwiki links: path, gdo, wp
Images are included with [[Image:name]]. (wikipedia help)
Lines and paragraphs break automatically.

More information about formatting options

KONIGI

Sign In

Don't have an account?

Gmail Rich Text Editor

Comments

Post new comment