1

Topic: Layers & Absolute Positioning not functioning properly.

I consider myself somewhat of a novice with TinyMCE despite using it for about a year now.

I am having a problem with the layers feature and don't know if it is a bug or my implementation. I haven't been able to find anyone with a similar issue that's posted to the forum.

First: Windows XP Pro SP3, FireFox 3.6.3 / Chrome 4.1.249.1064 / IE6 (Only because I have to), TinMCE 3.3.6

What's happening is that when I toggle a new layer (or absolute positioning on an existing object) I can position it where I'd like. Once I've hit the save button the feature stops working for that element. It locks in the TOP and LEFT values that were there after saving and never changes them again. To reiterate: When I initially create them their values change as it is moved (as reflected in the HTML source), however after I have saved once they never change again (and remain the same no matter where it is in the HTML source). Also, after the first save, if I remove an absolutely positioned element and press save it comes back (unless I remove it from the HTML myself).

This problem is browser independent.

Is this a bug with layers? Could it be how I am implementing TinyMCE or saving it? Could I be breaking something when I save (I really don't see how I could be)?

Thanks for your help,
Shane

Last edited by sdpetersen (2010-05-21 18:42:52)

2

Re: Layers & Absolute Positioning not functioning properly.

sdpetersen wrote:

First: Windows XP Pro SP3, FireFox 3.6.3 / Chrome 4.1.249.1064 / IE6 (Only because I have to), TinMCE 3.3.6

And where is second?

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

3

Re: Layers & Absolute Positioning not functioning properly.

Felix, second = the problem.

I'll look up my config code and post it later, but it probably won't matter because I think I'm using the default config with the one built in skin.

Gruesse von Amerika!

4

Re: Layers & Absolute Positioning not functioning properly.

FYI, here's the config code.

It's not in the config - it's TinyMCE itself. I can only get this to go away (get Absolute Positioning to work) if I revert to versions earlier that 3.0, which causes other things to break.

tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "advanced",
            skin : "o2k7",
            skin_variant : "black",
            plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,new,iframe,youtube",
            relative_urls:true,
            convert_urls:false,

            // Theme options
            theme_advanced_buttons1 : "newdocument,print,|,bold,italic,underline,strikethrough,charmap,iespell,|,cut,copy,paste,pastetext,pasteword,|,forecolor,backcolor,|,sub,sup,|,justifyleft,justifycenter,justifyright,justifyfull,|,fullscreen",
            theme_advanced_buttons2 : "undo,redo,styleselect,formatselect,fontselect,fontsizeselect,help",
            theme_advanced_buttons3 : "search,replace,|,bullist,numlist,|,indent,outdent,blockquote,|,link,unlink,anchor,image,media,youtube,iframe,|,styleprops,attribs,code,removeformat,cleanup",
            theme_advanced_buttons4 : "tablecontrols,|,hr,visualaid,|,visualchars,nonbreaking,pagebreak,|,cite,abbr,acronym,del,ins,|,insertdate,inserttime",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
            extended_valid_elements : "iframe[src|width|height|name|align|onload|frameborder|scrolling|onchange|id|style]",

            // Example content CSS (should be your site CSS)
            content_css : "../../ref/css/site.css",

            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "../pages/lists/template_list.js",
            external_link_list_url : "../pages/lists/link_list.asp",
            external_image_list_url : "../pages/lists/article_image_list.asp",
            media_external_list_url : "../pages/lists/media_list.asp",
            external_iframe_list_url : "../pages/lists/iframe_list.asp",

            //Initialize Full Screen Mode
            init_instance_callback : "myCustomInitInstance",

            // Replace values for the template plugin
            template_replace_values : {
                username : "Some User",
                staffid : "991234"
            }

        });

5

Re: Layers & Absolute Positioning not functioning properly.

sdpetersen wrote:

plugins : "safari,[...],template,new,iframe,youtube",

I'm not familiar with the plugins "new", "iframe" and "youtube". Using TinyMCE3.3.8 means that the "safari"-plugin is no longer required (and also isn't shipped with TinyMCE anymore) because its functionality has moved to the core of TinyMCE.

I cannot say anything about the inner workings of your third-party plugins and in what way they might or might not interfere with the layers plugin. Also you mention using TinyMCE "for about a year now" so I guess you haven't updated to the latest version available where your problems might have been long solved.

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

6

Re: Layers & Absolute Positioning not functioning properly.

Three of those five plugins came built into the version I initially downloaded (safari, template & new). The others were taken from the TinyMCE SourceForge page.

I'm afraid those plugins have nothing to do with the issue. Even without them the problem still occurs.

A "special thanks" to you, Felix, for implying that I am too stupid or ignorant to download and try the most recent version before I waste your time posting about a glitch. The problem still exists in TinyMCE3.3.9.

Just so you don't think I'm an idiot for using an 'old' config setup, the above config code is from the version that I am currently running on my server which does not have "safari" in the core: TinyMCE3.3.6.

Let me know if you still don't believe me and I'll be happy to shoot a video of it happening and throw it on YouTube.

7

Re: Layers & Absolute Positioning not functioning properly.

Hello,

i think i have the same problem. I'm running an old 3.3.2 and when i move an absolute positioned object, it is moved in the editor but not in the html source. Some of the Objects were created by a self written "Button Inserter" which creates an <a>-Tag with display:block, absolute position and background image (styled via css file). The left and top values are directly assigned to the object (style="top: ...; left...;").


EDIT:
Ok tried it again and it seems that it occurs on all objects that were saved and loaded again. So maybe its a problem with the parser or so


EDIT2:

I found an example of an object that i can move...

<a _mce_href="doclink://FRP_EG_01/" href="doclink://FRP_EG_01/" class="button button_green position_absolute" style="top: 94px; left: 340px;">Flucht- und Rettungsplan</a>

... and an object that i can't move on one page:

<a _mce_href="doclink://Startseite/" href="doclink://Startseite/" _mce_style="top: 272px; left: -1px;" style="top: 155px; left: 66px;" class="button button_green position_absolute">Feuerwehrlaufkarten</a>

The difference is, that the second one has an _mce_style set, which seems to override the normal style-attribute. But i don't know what it means...


EDIT3:

I only see this _mce_style-attributes with Firebug, not in the HTML-Source view. When i open the the source view, i see the _mce_style-values as style. For example "Feuerwehrlaufkarten":

<a href="doclink://Startseite/" style="top: 272px; left: -1px;" class="button button_green position_absolute">Feuerwehrlaufkarten</a>

It seems that the original style is ignored when displayed as source but modified when moving the element.

Last edited by redeye86 (2010-09-29 11:24:06)

8

Re: Layers & Absolute Positioning not functioning properly.

I found out that it works when i have

"cleanup: false" set ... but than i have all the _mce_stuff in the Posted Data...


I think i'll use this regexp to remove them when displayed:
http://tinymce.moxiecode.com/punbb/view … 108#p14108


EDIT:

Ok i see its a bad idea:

http://wiki.moxiecode.com/index.php/Tin … on/cleanup

Last edited by redeye86 (2010-09-28 23:12:22)

9

Re: Layers & Absolute Positioning not functioning properly.

I found another solution:

I added the following onchangehandler:

ed.onNodeChange.add(function(ed, cm, n, co) {
    if(n.className.indexOf("position_absolute") != -1){  //only for elements with class position_absolute in _my_ case
        ed.dom.setAttrib(n,'style',n.getAttribute('style'));
    }
});

It reads the attribute style with the browser-provided call "getAttribute" and sets the same value using the tinymce function "setAttrib" which sets the internally used _mce_style to the right values.

Last edited by redeye86 (2010-09-29 11:23:16)

10

Re: Layers & Absolute Positioning not functioning properly.

I had exactly the same problem with TinyMCE version 3.4.2. The code from the above post didn't work so I created a new one.

The following is added to the setup section of tinyMCE.init({ setup: setup_tinymce, } )

function on_node_change(ed, cm, n, co)
{
    if( n.className == "mceItemVisualAid" ) {
        ed.dom.setAttrib(n, 'style', n.getAttribute('style'));
    }
}

function setup_tinymce(ed)
{
    ed.onNodeChange.add(on_node_change);
}

I hope tinyMCE devs will fix this in the core someday. It's a big bug and makes the layers mostly useless.

11

Re: Layers & Absolute Positioning not functioning properly.

spd wrote:

I had exactly the same problem with TinyMCE version 3.4.2. The code from the above post didn't work so I created a new one.

The following is added to the setup section of tinyMCE.init({ setup: setup_tinymce, } )

function on_node_change(ed, cm, n, co)
{
    if( n.className == "mceItemVisualAid" ) {
        ed.dom.setAttrib(n, 'style', n.getAttribute('style'));
    }
}

function setup_tinymce(ed)
{
    ed.onNodeChange.add(on_node_change);
}

I hope tinyMCE devs will fix this in the core someday. It's a big bug and makes the layers mostly useless.

Where do I put this code exactly? Can you show me an example of how and where it should go please? Hopefully this is just the answer I need to fix this issue :)

12

Re: Layers & Absolute Positioning not functioning properly.

bump. Can anyone help with this? Anyone know where to put this code (from earlier post) or anyone have a solution to the absolute position issue?