1

Topic: Select text inside of div on first click

Greetings all.

I'm having a problem with IE and DIV tags that have an inline style tag on them where the width is specified within the style tag. When a user tries to select any content within the DIV tag, the DIV is selected first and the content is editable on the second click. If the DIV tag does not have an inline style tag on it that specifies a width attribute, the text is given focus immediately. The behavior our users expect when clicking on the content within the DIV is that they will be able to edit the content immediately without having to double-click on it. Firefox users do not need to double-click to edit the content though, so I'm not sure what the intended behavior actually is.

After I realized that it seemed to happen with both the advanced and simple skins, I tried digging around in tinymce_mce_src.js. I was initially trying to trace back events that toggled the visual aid class to figure out how to immediately toggle the text selection, but I couldn't find anything that really helped me.

I've removed all of my plugins and just used the most basic advanced skin init function, but TinyMCE still did not set the focus to the text on the first click. Also, I'd like to point out that I experience the same behavior on the TinyMCE example page (http://tinymce.moxiecode.com/example_fu … ample=true) using my test HTML. Following is some example code that seems to reproduce the behavior under the circumstances I described.

<div style="width: 200px;">
<br>
<br>
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pretium neque eu sapien. Aliquam erat volutpat. Cras eros nibh, viverra quis, gravida sit amet, varius nec, lorem. In porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer facilisis purus a enim.
<br>
<br>
<br>
<br>
</div>

A solution that would prevent all DIV edits would be quite acceptable, as our users only need the most basic of editing capabilities. Any ideas?

2

Re: Select text inside of div on first click

*bump*

Any ideas on how I can go about implementing the above described behavior, or even what the desired behavior is in this situation? Seems like it would be a fairly common encouter with TinyMCE implementors, but I can't find anyone in the forum posting about this.

3

Re: Select text inside of div on first click

Since there doesn't seem to be a standard browser behavior with this issue, and since it happens on the TinyMCE example page using v 2.0.6.1, I believe this problem is a verifiable bug. It has been attached to SF bug 1490840. http://sourceforge.net/tracker/index.ph … tid=635682

4

Re: Select text inside of div on first click

I have come across a similar issue, which I posted about in the Working Group forum :

I have come across a problem with IE and DIVs while creating a caption plugin (it is also evident when using the new layer plugin). This problem is evident in TinyMCE 2.0.5 and 2.0.61, but I am not sure whether it is an IE problem or a TinyMCE one.

Basically in creating a caption using my caption plugin, an image gets wrapped by two divs like this:

Code:

<div class="caption" style="width:160px; height:150px; border: 1px solid #000000">
<img src="img.jpg" width="140" height="120" title="image" alt="image" />
<div class="caption_text" style="text-align:center; clear:both;">Some Text</div></div>

All very well but after the caption is created, although you can click on the image to edit it, or to open the caption dialog to edit the caption, the editor 'loses' the img and jumps to the body instead, so the attributes of the image or the parent div cannot be retrieved by the caption dialog.

This only happens in IE and only if the first div has a width and/or height style defined.

I  checked it against the 'Full Featured Example' with the same result.

Ryan.

Last edited by happy_noodle_boy (2006-07-25 08:42:10)

just because you're not paranoid, doesn't mean everybody isn't out to get you.

5

Re: Select text inside of div on first click

amattie wrote:

Since there doesn't seem to be a standard browser behavior with this issue ...

I've been working on this for most of the day and it looks like Internet Explorer's default behaviour is as follows:
1) When the div (object) first gets focus, the "controlselect" event fires and the div is places into the ControlSelected state which allows the user to resize / move the object.
2) When the user presses the enter key or clicks the object a second time the object is placed in the UI-activated state which allows the user to edit the text inside.

My (and from what I can gather, your) desired behaviour is that when the div gets focus, it should skip the "control selected" state and go straight to the UI-activated state, preventing the user from moving / resizing the div and allowing them to edit the text inside it from the point at which they clicked on the div.

I managed to get this behaviour by handling the "controlselect" event and using a TextRange to position the cursor at the point where the user clicked. This could use some prettying up:

function handle_control_select(e)
{
    if (e.target.id == "yourDivID")
    {
        setTimeout("moveToText(" + e.clientX + ", " + e.clientY + ")", 1);
        return false;
    }
}

function moveToText(x, y)
{
    var inst = tinyMCE.getInstanceById("yourInstanceID");
    var holder = inst.getDoc().getElementById("yourDivID");
    var rng = inst.getBody().createTextRange();

    rng.moveToPoint(x, y);
    rng.collapse();
    rng.select();
}

References:
http://msdn.microsoft.com/workshop/auth … frame=true

6

Re: Select text inside of div on first click

Just wanna thank thabigd for the code, after a couple tweaks for Tine MCE V3 and it worked like a charm.

Here's the HOWTO to add this behaviour to all DIV's within your TinyMCE instance:

In tiny_mce.js find: Event.add(t.getDoc(), 'controlselect', function(e) {
   Add the following at the very top of the function:
        if (e.target.nodeName == "DIV")
       {
      setTimeout("moveToText(" + e.clientX + ", " + e.clientY + ")", 1);
      return false;
       }

Then just include this function somewhere in the same file:
function moveToText(x, y)
{
    var inst = tinyMCE.getInstanceById("elm1");
    var rng = inst.getBody().createTextRange();
   
    rng.moveToPoint(x, y);
    rng.collapse();
    rng.select();
}

Voila, now when a user selects a div, it will automatically put the caret inside and be ready for editing. You don't need to worry about your div's being resized, or moved around because the users cannot 'grab' the div's anymore.

It also makes the Non-Editable plugin more effective because users can no longer select an editable div and simply replace it....

7

Re: Select text inside of div on first click

This looks exactly like what I need. I implemented it, but keep getting JS error:

"Line 1, char 1: Object expected"

Only thing I changed is:

var inst = tinyMCE.getInstanceById("elm1"); to  var inst = tinyMCE.getInstanceById("pagecontent");

as "pagecontent" is the name of my textarea.

Any idea's??

Cheers,

Cees

8

Re: Select text inside of div on first click

The error msg comes from the line:

    setTimeout("moveToText(" + e.clientX + ", " + e.clientY + ")", 1);

So I changed it into:

       moveToText(e.clientX, e.clientY);

thinking: what difference could a millisecond make, right?

It kinda of works now, except:

if you have a DIV containing another element (eg. H1) and that other element has the float-attribute, it does not work....

<div>
<h1 style="float:left;">Anything</h1>
</div>

9

Re: Select text inside of div on first click

Hi, sorry to hijack thread, but I am trying to do the opposite.

I have TinyMCE 2.x on a Joomla 1.5 site and the selection handles for a DIV never show up if I click inside the DIV.

The same also happens with JCE 3 if I install that - the demo on the JCE site lets you select DIVs but when I install it and use it, you cannot select DIVs.

Please help!

10

Re: Select text inside of div on first click

Has anybody managed to get this to work in later versions (specifically 3.4.5)? I've used it for earlier versions, but am now upgrading and struggling with this.

Thanks

Graham

11

Re: Select text inside of div on first click

I have made some progress here http://www.tinymce.com/forum/viewtopic.php?pid=103272