There are numerous WYSIWYG editors available on the internet, but I'm yet to find one that implements some form of drag-n-drop implementation.

It is easy to create one's own editor, but I want to the user to be able to drag elements (ie. tokens) from outside the editable area and have them drop it at a location of their choice inside the editable area.

It is easy to inject html at a specific location of an editable element, but how do one determine where the caret should be when the user is dragging a DIV over some element in the editable area. To better illustrate what I'm trying to explain, see the following scenario.

The editable area (either an IFRAME in edit mode or a DIV with its contentEditable attribute set to true) already contains the following text:

"Dear , please take note of ...."

The user now drags an element representing some token from a list of elements, over the editable area, moving the cursor over the text until the caret appear just before the comma (,) in the text as shown above. When the user releases the mouse button at that location, HTML will be injected which could result in something like this:

"Dear {UserFirstName}, please take note of ...".

I do not know if anyone has ever done anything similar to this, or at least know of how one would go about doing this using JavaScript.

Any help will be greatly appreciated.