*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.

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 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....

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>

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