The Old Man Posted February 18, 2019 Share Posted February 18, 2019 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? Link to comment Share on other sites More sharing options...
Meddysong Posted February 18, 2019 Share Posted February 18, 2019 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?). Link to comment Share on other sites More sharing options...
The Old Man Posted February 18, 2019 Author Share Posted February 18, 2019 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. Link to comment Share on other sites More sharing options...
shahed Posted February 18, 2019 Share Posted February 18, 2019 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. Link to comment Share on other sites More sharing options...
The Old Man Posted February 18, 2019 Author Share Posted February 18, 2019 Thanks, nice plug-in btw. What is slimmer code html, though? Link to comment Share on other sites More sharing options...
shahed Posted February 19, 2019 Share Posted February 19, 2019 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. Link to comment Share on other sites More sharing options...
The Old Man Posted February 19, 2019 Author Share Posted February 19, 2019 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. Link to comment Share on other sites More sharing options...
opentype Posted February 19, 2019 Share Posted February 19, 2019 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. Link to comment Share on other sites More sharing options...
The Old Man Posted February 20, 2019 Author Share Posted February 20, 2019 Aha, that could work, thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.