views:

193

answers:

6

I want to write my own rich text editor with javascript or jquery. I don't know where to start, so as bare bones as possible is ideal.

EDIT: To response to the comment about reinventing the wheel - the reason why I want to this is because 1] some features I want to implement aren't available even in TinyMCE. 2] I have an idea to upgrade my website where alot of features of the site will interact with the editor. I think it'll take alot more work to modify another script for this purpose.

A: 

Well since the only built in text controls are plain text you'll need to make your own. This means handling focus, capturing key presses and displaying the caret. I would start there.

Spencer Ruport
The contentEditable attribute has the ability to turn many elements into "text" boxes that support formatting. It handles focussing, key presses and the caret.
Andy E
A: 

Your best bet is to take a look at how Xhina works. It is a great open source WYSIWYG editor. Other than that take a look here to get started.

Andrew Siemer
A: 

"Are there any really basic tutorials for how to build a simple rich text editor?"

Considering how much industry effort has gone into the ones currently available, I'm not sure there is a "simple rich text editor", much less a "basic tutorial". It's a very hard problem.

le dorfier
Don't you think this would have been more suited to a comment, rather than an answer? Answers are supposed to be helpful, after all.
Andy E
The question was: "Are there any ...". I was suggesting why the answer is probably "No"
le dorfier
+3  A: 

You'll have a mess to deal with when it comes to cross browser differences.

You'll notice the edit here does not convert text inline as you edit it. If you're looking to make something like a basic notepad that has separate display, it's a matter of finding the carat and working around it and the words and whitespace nearby.

If you're looking for a clean WYSIWYG editor, TinyMCE and openWYSIWYG both manipulate pages by inserting an iFrame, and setting the iFrame's properties to allow it to be edited. Before the page is submitted, they insert the iFrame's content into the original textbox, including the HTML and thus submit a pseudo rich-text item.

Mozilla has a place to start for Firefox.

Rich Text Editing in Mozilla

Symphony
For IE try this: http://msdn.microsoft.com/en-us/library/ms537837(VS.85).aspx
Boldewyn
+1 for the most helpful answer here. A lot of the work is done for you really like command key shortcuts, bold, italic, etc. You can execute these commands using execCommand('bold') or check if they can be executed using queryCommandEnabled(). These would help you on your way to making a toolbar.
Andy E
A: 

Well to start simply, create a row of same sized images for buttons. Give them all the same class file, then let Jquery process the onclick and capture the button name. Then based on the button name perform the required action. The basic framework shouldn't be so hard.

Tony Borf
A: 

I've found YUI's Rich Text Editor widget to be fairly small in size; perhaps you could tear that apart and see what they're up to?

If nothing else, it's easily one of the smaller ones I've seen around, so you could probably implement that for your website.

http://developer.yahoo.com/yui/editor/

Ryan McGrath