Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Customising the CMS /

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

allowing onclick with HtmlEditorConfig


Go to End


4 Posts   1833 Views

Avatar
3geeks

Community Member, 9 Posts

18 May 2012 at 7:15pm

Edited: 18/05/2012 7:23pm

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
Avatar
3geeks

Community Member, 9 Posts

22 May 2012 at 2:25pm

Anyone got any ideas?

Avatar
3geeks

Community Member, 9 Posts

23 May 2012 at 4:55pm

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...

Avatar
Tim Snadden

Community Member, 32 Posts

9 August 2013 at 2:50pm

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.