CKEditor Custom Button audio tag for non-admins

[The Old Man]

Hi,

I added a custom button to CKEditor which when clicked inserts a standard HTML5 Audio tag into a post. These are standard HTML5 tags. All users can use the button in its permissions. Only admins can post HTML

<audio controls="">
		<source src="https://mysite.com/downloads/audio/effects/MD2_single.mp3" type="audio/mpeg"> Sorry, your browser does not support the audio element.
	</audio>

It works great for admins, the browser shows the playback controls and plays the mp3 when pressed even on an iPad, but some of the code is stripped out when members use it which is preventing them for using it, their post reverts back to the fallback text.

I thought there was an option somewhere to whitelist certain html tags when posting, but I can't find it.

Anyone know how to resolve this, please?

[Meddysong]

Yes, I get caught out by the same thing every time I add a button!

My ACP isn't in Engish so I can't say exactly what you'll see on yours but under Customization > Toolbars there should be Settings. This opens on a default tab General. You need the other one (Advanced?).

[The Old Man]

Thanks @Meddysong

I just checked and I had seen that. It allows you to whitelist CSS, JavaScript and IFrames, but not specific HTML tags. I'm not sure why the audio tag gets mangled.

[shahed]

IPS security measures restrict almost every HTML attributes and most elements, that being saved through CKEditor. but there is some ways to bypass, like using slimmer codes in HTML side, using JS for correction. same can be done with jQuery. which is I did that for this button.

With jQuery you can attach right sort of HTML elements and tags after page load.

[The Old Man]

Thanks, nice plug-in btw. What is slimmer code html, though?

[shahed]

Well, since most HTML attributes can't be saved during posting and these parts are usually omitted, and since CKEditor's plugins mostly using HTML attributes for JS reference, some time with this kind of plugins, you can modify HTML line for specific CSS class then use this class for JS reference. because you can whitelist CSS class in IPS.

I haven't seen how your button works, so I assume lines won't be saved because <audio> tag and "controls" attribute. you can gave the audio line a specific CSS class, whitlist it. grab this one with jQuery and modify it with that. I'm not sure but I think it's gonna work.

[The Old Man]

Thanks, I see what you mean. Appreciate the suggestions. I noticed in the CKEditor docs that you can allow certain tags but it seems very complex, it looks if you don't allow all tags, the others will be stripped out. I don't want to mess around with the editor that much.

[opentype]

Another option: Don’t place the audio tags directly in the post. Only put an iframe in the post and then let iframe handle the non-allowed tags. That should work. 

[The Old Man]

Aha, that could work, thank you.