How do I determine the insertion point/element using a wysiwyg editor

I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was.

More information:

I am a C programmer who morphed to a Java programmer who knows some javascript.

The JSP page looks like this:

--------------------------------------------------------------------

Some text and text fields for some basic information


--------------------------------------------------------------------


The javascript wysiwyg editor


--------------------------------------------------------------------
The properties box (changes depending on the type of item being inserted)
--------------------------------------------------------------------

Submit button, etc. for the page (so the information can be persisted)


I have tried:

1. Seven days of searching the web for helpful hints.

2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.)

3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.)

I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple.

Does anyone have any ideas?

Thanks in advance.

Carl

Hi Carl,

Did you ever get anywhere with this?

I don't know about you but I'm apalled by this scripting stuff. It seems to take several days to make any headway with the simplest of things. The basic things that you would think everyone would need to know just don't seem to be mentioned anywhere. This state of affairs just doesn't seem to concern anyone. On the forums you just get the know-it-alls posting their pathetic little answers to the wrong questions.

Have you used the execCommand stuff. It knows where the caret is and puts thing there for you.

I exploited this in a designmode iframe by using execCommand to insert a horizontalrule with an ID attribute. Then I found the horizontal rule and inserted the stuff I wanted next to it and then deleted the horrizontal rule. It works for me. Outrageous or what!

Here's a snippet of mine for inserting a table at the current cursor position. The underscores are just for indenting (leading spaces seem to get removed from posts). Note that I've found no way of positioning the caret in the first cell after it has been created - another thing that you would have thought would be worth documenting - but no.

var what=2;
document.getElementById("edit").contentWindow.focus();
document.getElementById('edit').contentWindow.document.execCommand("InsertHorizontalRule", false, "StoryTelling");
element = document.getElementById('edit').contentWindow.document.getElementById('StoryTelling');
if (element != null)
{
__table = document.getElementById("edit").contentWindow.document.createElement("table");
__table.style.cssText = "border-collapse:collapse;";
__tbody = document.getElementById("edit").contentWindow.document.createElement("tbody");
__for (var i = 0; i < 2; i ++)
__{
____tr = document.getElementById("edit").contentWindow.document.createElement("tr");
____tr.style.cssText = "height:1.4em;vertical-align:top;";
____for (var j = 0; j <= what; j ++)
____{
______td = document.getElementById("edit").contentWindow.document.createElement("td");
______td.className = "td1";
______tr.appendChild(td);
______if ((i == 0) && (j == 0)) cell0 = td;
______}
____tbody.appendChild(tr);
__}
__table.appendChild(tbody);
__element.insertAdjacentElement("beforeBegin", table);
__// FIND THE ELEMENT AGAIN LEST EXECCOMMAND OVERWROTE IT
__element = document.getElementById('edit').contentWindow.document.getElementById('StoryTelling');
__if ((element) && (element != null) && (element.removeNode)) element.removeNode();

__// You would think that setting the caret position would
__// be a thing that people would want to do.
__// The tinymce editor cant seem to doit nor can google docs.
__// cell0.setAttribute("tabindex", 1, 0);
__// cell0.innerHTML = "Hello";
__// cell0.focus();
}

On the forums you just get the know-it-alls posting their pathetic little answers to the wrong questions.


You also get people who hi-jack ancient threads and fail to read the posting guidelines about the use of [ code] tags. :p These people are mostly ignored.