Develop Reference

Where and how do I start to make an online text editor like that of Quora?

I know a bit of jQuery and Javascript along with Django for the backend. I am interested in building an editor somewhat like the editor of Quora. I have read that their editor is made with a DIV whose content-editable property is set to True. However, I am confused as to what material to study in order to understand how it works with text formatting and media upload. Although I like Quora's editor the StackExchange editor is pretty nice too. I think I'm not gonna be able to implement something so advanced but I need to start somewhere.
In short, can anyone point me to an article or tutorial which deals with coders trying to make an editor from scratch or customize from open source?

contentEditable was added by Microsoft in IE5. This feature allow to change innerHTML of any element. good place to start would be MDN and many open-source implementation of wysiwyg widgets available on github.
Short explanation
Start with empty div.
Set contentEditable to true.
Add button that would act as emphasis functionality.
Learn about text selection.
If button clicked and text was selected, wrap that text with span tag with emphasis styling css (or class).
Profit.

JavaScript textarea editor with custom formatting rules

i need to implement simple text editor with custom (probably dynamic) rules. For example, if user change text somehow i want to run regex (or callback method or something else) on this text and apply formatting for it. For ex all ip addresses in text should have red color, names from specified range - black, all words starting from "abc" - green.
So basically what i need is:
- simple text editor based on text area
- ability so add rules applying to text withing text area
I reviewed a lot of related resources and didn't found any simple solution yet. As for now I've started to implement my own editor with using of contenteditable attribute and JQuery.
I never wrote such functionality before, so could you please point me to the right direction? Maybe i can use already implemented tools or specific strategy?
Thanks a lot.

Maybe it would be useful for someone.
After a bit of investigation at first i tried to use jQuery Highlight Plugin, but it does not cover my all of needs so i used Codemirror editor, which i found very nice and customizable.
I wrote my custom mode and it's working perfectly.
As start point i used this article

JQuery and ACE-Editor not playing well together

I am building some modules to teach intro coding concepts to some of my students
http://jsbin.com/pacaxoza/3/edit
When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).
In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.
The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.
Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?
Thanks

Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example

Best Way to Develop a text code editor with syntax highlighting

I am developing a code editor with syntax highlighting and detecting; I am following current architecture for it;
a) Have a text area with z index at 10
b) Have div's above text area with z index 40 which mask contents typed with custom colors needed for syntax highlighting
Can some one suggest me better architectural approaches for building a custom code editor with syntax highlighting and detecting

Have you checked out AceEditor?
Not sure exactly why you would want to start working on a new editor, which will probably take a lot of time to develop and not use what's already out there, functional, fully tested and with a big and vibrant community around it.

Is there any jquery plugin to generate a tip image?

The tip text which highlighted in below image serves wells for giving some instruction to first time user. And I notice such pattern several times in different web apps, I guess there must be some javascript libraries to help generating such tip visualize? But I just fail to find the correct keywords to capture them. Any one give some suggestions please?
[1]: http://farm7.static.flickr.com/6071/6031668602_9c7fcf70be_m.jpg ""
------------------updated----------------
Thx for the suggestions for recommending jquery tooltip plugins.
But other than tooltip widgets, what this questions requests is a more specified “tip plugin” which could be used to generate a transparent tip image which contains simply some words in casual font and an arrow points to parent context. Yes, this is a tooltip but not a ordinary tooltip which comes in the form of a box or bubble.
Traditional tooltip are useful for displaying detail info on the fly, while the tip I mean here performs better to attract attentions to user for providing some quick tutorial instructions without adding too much visual noises**

You can try this: http://codylindley.com/blogstuff/js/jtip/

This plugin is great for tooltips in jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Demos are available here.

You are looking for some sort of tooltip plugin. Here are a few http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/