Thread

I am about to launch our first EE website and i have got the team involved in adding content.

One of the frustrations they are having with the RTE is that it keeps adding a <figure> tag around images. This is causing some issues with the layout. Also it appears to nest <figure> tags within <figure> tags!!

So rather than getting the non-html savvy team to edit in code view. Can I disable the addition of the anything around my image tags inc <figure> as I have taken care of what is needed in my CSS/HTML?

Hello nurotic,

I am sorry that you are experiencing this RTE behavior. There is no way to disable that feature of the RTE.

Feel free to file a Feature Request for this.

I am sorry I do not have better news.

Is there anything else I can help with?

Cheers,

That is a shame.

If i use a alternative WYSIWYG such as tinyMCE is there a solution for loading images from EE?

I’m getting this issue as well, it’s becoming a bit of a nightmare. If a client removes then adds an image you get Inception style nesting of <figure> tags.

The file browser for EE is good, but theres no easy way I could see to integrate it into tinyMCE.

For the moment working with what we have i dug around and found where the <figure> is being added:

expressionengine/rte_tools/rte.images.js around line 75

var $img = $('<figure>')
    .css('text-align','center')
    .append(
     $('<img alt="">')
     .attr('src', image_object.thumb.replace(/_thumbs\//, ''))
    );

If you know JQuery you should be able to tailor this to you needs. I have simply adjusted it to read

var $img = $('<img alt="">')
   .attr('src', image_object.thumb.replace(/_thumbs\//, ''));

Also the caption text needs to be taken care of.

if ((caption_text = prompt(EE_rte_image.caption_text, '')))
   {
    $img.append(
     $('<figcaption>').text(caption_text)
    )
    .find('img').attr('alt', caption_text);
   }

As my <img> is not wrapped in any tags the caption text is only going to show in my alt. So I adjusted the code to:

if ((caption_text = prompt(EE_rte_image.caption_text, '')))
   {
    $img.attr('alt', caption_text);
   }

Make sure you have a backup of the original. And please bear in mind this is a temp fix as it will disable the overlay which allows the image formatting. Hope this helps.

Now to tackle the br issue…Excelsior.lol!

Hey nurotic,

Nice bit of hacks there. We of course do not support a modified version of EE. I am going to move this over to the community help forum where others may benefit from the modifications you have made.

Cheers,

Something we’ve done on a couple of our sites is take advantage of tinyMCE’s external_image_list_url option.  Basically just follow the instructions here: http://www.tinymce.com/wiki.php/Configuration:external_image_list_url and use the EE file entries tag to build the array.  It’s definitely not as visually pleasing as the default EE file browser, but it gets the job done!

I kinda fixed this issue by adding Modernizr to my theme.

I think EE needs to add a setting whereby they can select whether or not the system outputs HTML5 tags in the RTE or not.

WordPress plugins such as Gravity Forms have this feature and it’s pretty nice. EE should do the same in future releases.