Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kim Andersen 1447 posts 2196 karma points MVP
    Feb 12, 2015 @ 10:12
    Kim Andersen
    0

    Allowing any elements in the RTE in V4.11.8

    UI Questions

    Hi all

    One of our customers would like to have full control over the input in the richtext editor. This means that they want to be able to use the editor as normally, but also want to be able to insert some custom HTML-code.

    In more details right now they want to insert the following piece of code in the editor:

    <div>
  <img src="http://www.domain.com/media/1904234/blue_cirkel.png" alt="Blue Cirkel"
      onmouseover="this.src='http://www.domain.com/media/1904242/white_cirkel.png';"
      onmouseout="this.src='http://www.domain.com/media/1904234/blue_cirkel.png';"/>
</div>

    A simple image-swap function.

    I know that this is not the best practise, and they can screw things up, but they are fully aware of this, and they still want us to set it up.

    I've tried the following guide to make this happen: https://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-%28tinymce%29/allow-any-markup-in-the-tinymce-editor

    Unfortunatelly it doesn't seem to work, and the code is still stripped.

    Any of you knows how this can be achieved, or what might be wrong?

    Thanks in advance.

    /Kim A

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Feb 13, 2015 @ 17:21
    Jan Skovgaard
    1

    Hi Kim

    I was not able to make it work directly on the tag either but it seems like it's possible to fire the events on the surrounding

    element instead. So you should be able to write it like this instead

    <div onmouseover="document.getElementById('magicimage').src='http://www.domain.com/media/1904234/white_cirkel.png'" onmouseout="document.getElementById('magicimage').src='http://www.domain.com/media/1904234/blue_cirkel.png'"><img id="magicimage" alt="Blue Cirkel" src="http://www.domain.com/media/1904234/blue_cirkel.png" /></div>

    I tried on a fresh installation of 4.11.10...so it should work on your installation as well.

    Have a nice weekend mate.

    /Jan

    Copy Link
  • Mads Krohn 211 posts 504 karma points c-trib
    Feb 13, 2015 @ 22:42
    Mads Krohn
    101

    In the umbracoSettings.config file under the imaging section there should be an element called allowedAttributes.
    It's described as so: 

    <-- what attributes that are allowed in the editor on an img tag -->  
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>

    Simply add the mouseover and mouseout attributes and they are no longer stripped from the mark up.
    Why it was decided to add another layer of html tidying I would love to know :P

    Keeping Tidy disabled and setting validElements in TinyMce to *[*] is properly still a good idea considering your clients apparent needs.

    Tested on an old Umbraco 4.11.6.

    Cheers
    Mads

    Copy Link
  • Kim Andersen 1447 posts 2196 karma points MVP
    Feb 18, 2015 @ 09:58
    Kim Andersen
    0

    Wohoo, it works!

    Thanks both of you. Mads, I used your solution this time.

    Thanks again :)

    /Kim A

    Copy Link
  • Mads Krohn 211 posts 504 karma points c-trib
    Feb 18, 2015 @ 09:59
    Mads Krohn
    0

    Glad you got it working :)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft