Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();
    }

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,318
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Quote Originally Posted by DinoSaurclover View Post
    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. These people are mostly ignored.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •