Jump to:

5554 Posts in 1742 Topics by 1227 members

Customising the CMS

SilverStripe Forums » Customising the CMS » allowing onclick with HtmlEditorConfig

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

Page: 1
Go to End
Author Topic: 663 Views
  • 3geeks
    Avatar
    Community Member
    9 Posts

    allowing onclick with HtmlEditorConfig Link to this post

    Hi guys,

    I'm trying to allow the ability to add in an onclick for A tags that are edited in the TinyMCE editor in SS 2.4.7. I've been searching for hours and there is quite a bit of info on this out there but it seems to be either old or isn't working quite like I expect.

    I'm trying to set in my mysite/_config.php a complete new list of 'valid_elements' so that I can control exactly what can be put into the editor. Essentially I wanted to add in iframe and scripts, and then add a few extra bits to some of the existing allowed elements to allow onclick="" etc on a tags and style="" etc on images.

    I essentially got the full xhtml list from the TinyMCE site and then cut it back to the 'usual' HTML tags my client might use.

    So this is what I have in my config:

    //*******************
    HtmlEditorConfig::get('cms')->setOption('valid_elements',
    'a[class|coords|href|id|name|onblur|onclick|ondblclick|onfocus|onkeydown|
    onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|
    onmouseup|rel|shape<circle?default?poly?rect|style|tabindex|title|target|type],
    area[accesskey|alt|class|coords|href|id|onblur|onclick|ondblclick|onfocus|
    onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|
    onmouseover|onmouseup|shape<circle?default?poly?rect|style|tabindex|title|
    target],blockquote[class|id|style|title],
    br[class|clear<all?left?none?right|id|style|title],

    ... (some items removed so it actually shows in this forum) ...

    ,iframe

    ,
    img
    ,

    ... (some items removed so it actually shows in this forum) ...

    ,tt[class|id|style|title],ul[class|compact<compact|id|style|title|type]');
    //*******************

    The 'new' tags such as iframe seem to work fine, but I still can't put in an onclick="" on the a tag nor style="" on the image tag.

    Any ideas people? Am I putting this in the wrong place? Is there something else I need to do?

    Seeing as the forum window messes up the items I've attached the entire command as a txt file.

    Cheers,
    Duncan

    Attached Files
  • 3geeks
    Avatar
    Community Member
    9 Posts

    Re: allowing onclick with HtmlEditorConfig Link to this post

    Anyone got any ideas?

  • 3geeks
    Avatar
    Community Member
    9 Posts

    Re: allowing onclick with HtmlEditorConfig Link to this post

    Anyone? Surely this is quite a common thing and I'm guessing a very easy fix... I just need t allow onclicks for a tags via the TintMCE html window...

  • Tim Snadden
    Avatar
    Community Member
    32 Posts

    Re: allowing onclick with HtmlEditorConfig Link to this post

    I know this is a bit old but I have had a similar problem and came across this post. People will say to do it unobtrusively which is the right way for developers but for content editors I think there is a place for adding inline click handlers for things like Google Analytics.

    There are two things you need to do. First is to add 'onclick' into the 'valid_elements'. Secondly you need to prevent the 'cleanup_callback' function from stripping this attribute. There are a number of ways you could do this but perhaps the simplest would be in your mysite/_config.php. Pseudo code follows...

    LeftAndMain::require_javascript('mysite/javascript/myCleanupFunction.js');

    HtmlEditorConfig::get('cms')->setOptions(
       array(
          'valid_elements' => '@[onclick ... (either programatically modify or copy/paste from framework/admin/_config.php)',
          'cleanup_callback' => 'myCleanupFunction',
       )
    );

    To create myCleanupFunction in js you may want to copy 'sapphiremce_cleanup' from framework/javascript/HtmlEditorField.js and remove this line:

    value = value.replace(/([ \f\r\t\n\'\"])on[a-z]+=[^ >]+/ig, "$1");

    This is the bit that is stripping the onclick attribute.

    I haven't done it exactly like this as I ended up creating a LeftAndMainExtension and a custom HTMLEditorConfig but something like the above should work or at least get people on the right track.

    663 Views
Page: 1
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.