Anytime I try to add a class to an HTML element (div) in a post on the forum, the class is stripped when the post is displayed. How can I stop this from happening?

I see I may need to “whitelist” the attribute or class? How exactly do I go about doing that?

[image] pnewelljr: How exactly do I go about doing that? You could try putting together a plugin eg. plugins/progress/plugin.rb # name: progress # about: allow progress tags in posts # version: 0.1 # authors: Mittineague # url: http://localhost.com:4000/ register_asset "javascripts/progress.js.es6", :server_side plugins/progress/javascripts/progress.js.es6 Discourse.Markdown.whiteListTag("progress", "class", /d-prog/); Discourse.Markdown.whiteListTag("progress", "max", /[0-9\.]+/); Discourse.Markdown.whiteListTag("progress", "value", /[0-9\.]+/); i.e. “tag”, “attribute”, /acceptable values/ * the trickiest part may be getting the regex right

I apreciate your response, is this a complete thing? Can I try implementing it? I am new to plugins and have no experience with ruby or regex. https://github.com/pnewell/discourse-html-whitelist/

It should work, but note the i.e. “tag”, “attribute”, /acceptable values/ The example code I posted allows something like 26% For div tag class values you will need to use something more like Discourse.Markdown.whiteListTag("div", "class", /[a-z]+/); Except instead of allowing “a to z” which might allow too much you should fine-tune the regex to meet your needs. eg. if it will always only be “my-special-value” then this would be best Discourse.Markdown.whiteListTag("div", "class", /my-special-value/);

Great! Thanks, also to check, the folder structure should be discourse-html-whitelist/assets/javascript/progress.js.es6? Or discourse-html-whitelist/javascript/progress.js.es6? My register line is: register_asset “javascript/progress.js.es6”, :server_side

I don’t know if it needs to be though I suspect it does (I went by other plugins that work) i.e. register_asset “auto-magically” looks for an “assets” sub-folder, so it exists in the folder structure but you don’t need to (shouldn’t) have that in the register_asset path Also, I guess you could name the folder “javascript” but every example I’ve seen uses the plural “javascripts” I imagine it is only because the folder often contains more, but it might also have something to do with the “auto-magically” loading of es6 files. Finally, I named it “progress” but you should probably use a name more meaningful to what it’s doing. (though AFAIK any name should work)

Great, thanks! Finally, due to the other plugin I am working on, I actually need to also allow script and and link elements as well. I need some javascript to run on my posts, and it seems like if I add it to the head through Custom it only loads on posts when I refresh the page. Anyways, would whitelisting those two work similarly? The code I need to add looks like this: Tags from Mermaid (Flowchart) Posts --> mermaid.initialize({startOnLoad:true});

[image] pnewelljr: would whitelisting those two work similarly? AFAIK whitelisting is for post content and is not involved with what is put into Admin → Customize I am unfamiliar with the Mermaid (Flowchart) Plugin but my guess would be is that if you are having problems it is more likely a “onebox” issue.

Post HTML Element Class Being Removed

Product Support

codinghorror (Jeff Atwood) November 3, 2018, 9:33pm 11

Is this still a valid technique in late 2018 @Mittineague?

Topic		Replies	Views
Adding HTML classes in posts doesn't appear to work Product Support	6	2562	May 9, 2017
Whitelisting elements in Discourse Plugin Development	5	1156	December 9, 2022
Whitelisting HTML tags / attributes Product Support	2	2012	August 3, 2020
Whitelisting HTML tags Product Support	3	1129	May 3, 2022
What are the different ways to customize content inside a post (custom attributes and such) Product Support	8	2894	May 17, 2022

Post HTML Element Class Being Removed

Related topics