1

Topic: Image dialog doesn't save left/right alignment in HTML

When I use the image dialog to insert an image in TinyMCE, the HTML for the image is saved along with attributes like size, alt text, etc., but if I set the alignment to either left or right the code for alignment does NOT get saved in the HTML.  The code for the image is there with all the other attributes, just not for the alignment.  This is happening in both IE and Firefox, and with both the default and advanced image dialogs.  I checked and both ALIGN and FLOAT are listed in the allowable attributes under IMG.

Has anyone run into this problem before?  I'm using version 3.0rc1 of TinyMCE.

For now, I seem to have "fixed" the problem by dropping back to version 2.1.3.  Perhaps version 3.0rc1 isn't quite ready for prime time yet.  Anyway, my right and left alignments are working now for images.

2

Re: Image dialog doesn't save left/right alignment in HTML

The latest SVN version has some fixes for the image properties issues.

Best regards,
Spocke - Main developer of TinyMCE

3

Re: Image dialog doesn't save left/right alignment in HTML

spocke wrote:

The latest SVN version has some fixes for the image properties issues.

Thanks! And I excuse for mistake in forum section.

4

Re: Image dialog doesn't save left/right alignment in HTML

Actually, I have the same problem still and I've installed the latest 3.0 stable release for the first time. The align and even vspace and hspace attributes do not keep when you add them in. The image properties box shows float:right or float:left but it doesn't keep.

I have to manually go into the the HTML view and modify it. But if I go back in to edit it again...just bringing in the HTML code to the box strips it out as well.

Is there a fix? Here's what my config looks like:

<!--
tinyMCE.init({
            
    mode : "textareas",
    theme : "advanced",
    plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    //plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr|,print,|,ltr,rtl,|,template,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        theme_advanced_resize_horizontal : true,
        theme_advanced_resizing : true,
        apply_source_formatting : true,
       
    //the following removes font tags and replaces with span tags for accessibility
    convert_fonts_to_spans : true,
    font_size_classes : "fontSize1,fontSize2,fontSize3,fontSize4,fontSize5,fontSize6,fontSize7",
    font_size_style_values : "xx-small,x-small,small,medium,large,x-large,xx-large",
    //end font to span tags section
    content_css : "/styles/custom.css",
    relative_urls : false,
    editor_selector : "mceEditor"

});
//-->

5

Re: Image dialog doesn't save left/right alignment in HTML

Change this:
img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]

into this:
img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]

or simply remove it since the default one is okey.

Best regards,
Spocke - Main developer of TinyMCE

6

Re: Image dialog doesn't save left/right alignment in HTML

That did it! Thanks alot! Great product by the way...makes my life so much easier

7

Re: Image dialog doesn't save left/right alignment in HTML

Hello.

I just installed 3.0.1 and I still have the same problem, the image alignment is still not saved, the bug is reproducible.

Can we expect to a fix in the near future ?

Thank you.
Cosmin

8

Re: Image dialog doesn't save left/right alignment in HTML

Works for me when I try it. If I align an image and then press the source button it will give me the correct alignment. Please file a bug report at SourceForge with steps for us to reproduce it. Thanks

Best regards,
Spocke - Main developer of TinyMCE

9

Re: Image dialog doesn't save left/right alignment in HTML

Ok, here is a reproducible case:

- go to www.casa-romanilor.ch
- login with tinymce/tinymce
- when logged in go to http://www.casa-romanilor.ch/node/48/edit
- try to make the image left aligned, vertical space 12, horizontal space 12
- preview or publish your changes.

The story should look like the one at http://www.casa-romanilor.ch/node/47 .

"Previzualizare" means preview; "Trimite" means publish.

Cosmin

10

Re: Image dialog doesn't save left/right alignment in HTML

Still this: img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]
Needs to be changed to this: img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]

Best regards,
Spocke - Main developer of TinyMCE

11

Re: Image dialog doesn't save left/right alignment in HTML

Well, exactly my point: I have made the changes in plugin_reg.php (first try is to make the changes you suggested, now the line is completely removed) but it still does not work: the preview is ok, however the saved page is wrong.

Is it necessary to reopen the ticket on Source Forge ?

Thank you.
Cosmin

12

Re: Image dialog doesn't save left/right alignment in HTML

I don't think this is TinyMCE related. Make sure that Drupal hasn't got some HTML filter as well. This works perfectly fine on our local examples not running drupal.

Best regards,
Spocke - Main developer of TinyMCE

13

Re: Image dialog doesn't save left/right alignment in HTML

I used tinymce_autoconf, so I did not change (at least not on purpose) anything in the filter.

I have the following allowed HTML tags: <a> <b> <address> <blockquote> <br> <caption> <center> <code> <dd> <del> <div> <dl> <dt> <em> <font> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <li> <ol> <p> <pre> <span> <strong> <sub> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <u> <ul> <tr>

Is there anything I should add ?

14

Re: Image dialog doesn't save left/right alignment in HTML

Not that I know, but I'm not a drupal expert. But checking the Drupal forums might be an idea to see if there is someone else with a similar problem since this seems to be drupal specific.

Best regards,
Spocke - Main developer of TinyMCE

15

Re: Image dialog doesn't save left/right alignment in HTML

I am sorry, I don't understand what you mean: when I submit my changes, I send an <img> tag, the alignment formatting is not inside, as I saw; the image is displayed, I get the attributes width, src, alt, height and title.

I see in the preview the following xml code:
<textarea cols="60" rows="20" name="body" id="edit-body"  class="form-textarea"><p><img width='168' src='/files/zaira_florescu.jpg' alt='Image description' height='280' style='float: left; margin: 12px;' title='Title' />some text here </textarea>.

So it's normal to believe that the style has been filtered. I don't see how this could be a Drupal filter.

Am I wrong somewhere ?

Last edited by cosmin2 (2008-02-29 16:41:38)

16

Re: Image dialog doesn't save left/right alignment in HTML

It's seems to be aligned correctly now when I login to your page. The extended_valid_elements option has also been changed from when I last tried it so that was probably the reason for the issue as I mentioned earlier.

Best regards,
Spocke - Main developer of TinyMCE

17

Re: Image dialog doesn't save left/right alignment in HTML

This is strange, I see it still incorrectly alligned. And I cleared the cache (Firefox) just to be sure I see the latest version.

Please note that I have a similar page, the incorrect one has the address I already mentioned, http://www.casa-romanilor.ch/node/48 . The alignment information is saved, indeed.

The similar page has the correct alignment, I made it with another module.

18

Re: Image dialog doesn't save left/right alignment in HTML

It seems to be a problem with the filter module in Drupal: http://drupal.org/node/205160

Best regards,
Spocke - Main developer of TinyMCE

19

Re: Image dialog doesn't save left/right alignment in HTML

Very funny...

Thank you very much for your time.

20

Re: Image dialog doesn't save left/right alignment in HTML

Maybe it can be tweaked or replaced by some better module that supports the whole range of tags. Try this one instead: http://drupal.org/project/htmlpurifier

Best regards,
Spocke - Main developer of TinyMCE

21

Re: Image dialog doesn't save left/right alignment in HTML

With HTML Purifier it's worse, I get some errors and everything in the body of the page is filtered-out big_smile.

Thank you very much for the help, I guess I have to hack the filter module..

Last edited by cosmin2 (2008-02-29 19:17:15)

22

Re: Image dialog doesn't save left/right alignment in HTML

spocke wrote:

I don't think this is TinyMCE related. Make sure that Drupal hasn't got some HTML filter as well. This works perfectly fine on our local examples not running drupal.

I know this is an old thread, but I still got the problem mentioned in this thread.
The problem I found was solved with the information from spocke above. I was simply removing the formatting when I saved the content with my PHP file.

Easy solved, but almost made me throw out my computer through my window wink