Jump to:

23367 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » TinyMCE - howto image without surrounding div

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 5934 Views
  • patte
    Avatar
    Community Member
    63 Posts

    TinyMCE - howto image without surrounding div Link to this post

    Hi,

    can someone please explain howto insert an image with TinyMCE without getting a div block surrounding the image tag?

    <div class="image leftAlone" style="width: 282px;">
    <img height="120" width="282" src="assets/Uploads/Open03.jpg" alt=""/>
    </div>

    Unfortunately the option "alignment / style" doesn`t include a "just image" style.

    I tried to make my own style but i was not able to find the correct TinyMCE configuration to make my own. Where can I add my own styles to have a clean image integration without any other elements?

    Thanks much!

    patte

  • pinkdigital
    Avatar
    Community Member
    7 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    you will need to edit jsparty/tiny_mce_improvements.js

    between line 528 and 547.

  • SalvaStripe
    Avatar
    Community Member
    89 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    do you use SS 2.3 oder an SS 2.3 RC version?
    i already posted this problem: http://open.silverstripe.com/ticket/3460

    you could go into the HTML editor of the CMS and remove the DIV tag arround the IMG.. then the alignment works again.

    they made this div tag to have the option to add a caption to the picture i think.
    you can read the TicketLog.. they are discussing about this problem

    SalvaStripe

  • silvernick
    Avatar
    Community Member
    4 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    This was the first thing I noticed when trying out SilverStripe and it nearly drove me nuts, not being able to center an image... I can edit the HTML easily but no editor I know could. I modified the code in the place pinkdigital mentioned so that the div is only inserted if a caption is actually written. If there's no caption just the img tag gets inserted. Here it is:

    /**
        * Insert an image with the given attributes
        */
        ssInsertImage: function(ed, attributes, cssClass, withCaption) {
           el = ed.selection.getNode();

          var imageContainerClass = withCaption ? 'captionImage' : 'image';

          var imgOnly = '<img id="__mce_tmp" />';
          
          var imgDivv = '<div style="width: ' + attributes.width + '" class="' + imageContainerClass + ' ' + cssClass + '"><img id="__mce_tmp" />';
          
          var captDiv = '<div style="width: ' + attributes.width + '" class="caption">' + attributes.title + '</div>';

          if(withCaption && attributes.title != "") {
             html = imgDivv + captDiv;
             html += "</div>";
          }
          else{
             html = imgOnly;
          }

    It is still not perfect as a captioned image can still not be positioned away fron left-aligned but it's a start. One would probably only have to to add a surrounding div that's set to 100%. I'll give it a try later and see if that works.

    Regards.

  • patte
    Avatar
    Community Member
    63 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    hey guys,

    everytime I edit the html code i get a <p> tag surrounding the img tag. If i delete the <p> and save the tinymce text it is still there.... strange. For me this is a problem because i want to give every paragraph padding and now those images also get it. Any idea?

    @silvernick - thanks for your code snippet... I couldn`t get it work .. perhaps you can be more specific where to replace the lines...or post the complete tiny_mce_improvements.js ? thanks much in advance!

    Wouldn`t it be a perfect solution in general to add an Alignment / style "image only" within the TinyMCE Image window?

    patte

  • tonisch
    Avatar
    Community Member
    15 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    Hi!

    Did you get it working that you could insert an image without the surrounding paragraph-tag?
    I have the same problem as well and could not find it in the tiny_mce_improvements.js.

    Toni

  • Bright Eyes David
    Avatar
    Community Member
    26 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    I know this is an old topic, but I'd like content editors to be able to insert an image without having a paragraph tag wrapping it. This is more for cleanliness of markup more than anything else.

    Any ideas?

  • Devlin
    Avatar
    Community Member
    215 Posts

    Re: TinyMCE - howto image without surrounding div Link to this post

    I don't get the problem why a image should not get wrapped in a paragraph...
    If you need to insert an image which is non-floating then you need proper padding/margin to not mess with typography and text layout. The paragraph tag will do this for you since every text block is/should be wrapped in a paragraph.
    On the other hand if you need an floating image then you should insert the image directly in the paragraph where the image can float around the text.

    However, you can disable the automatic paragraph via HTMLEditorConfig but this is simply nonsense and imho bad style of coding.

    5934 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.