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?
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
3 Likes
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.
It should work, but note the
i.e. “tag”, “attribute”, /acceptable values/
The example code I posted allows something like
<progress class="d-prog" max="8" value="2">26%</progress>
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/);
1 Like
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:
<!-- Styles for the Mermaid (Flowchart) Plugin -->
<link rel="stylesheet" type="text/css" href="https://a1b162c9ba316380004223e5ebcd9fd144cbffea.googledrive.com/host/0B94LsQPLeilLfkxHY3djaE53TkEwcUZfbVY1MkxTa3Bpb25aclNhLWUzV2dLeEt4VlVFcWM/mermaid.min.css">
<!-- Custom Code to Remove <br> Tags from Mermaid (Flowchart) Posts -->
<script src="https://a1b162c9ba316380004223e5ebcd9fd144cbffea.googledrive.com/host/0B94LsQPLeilLfkxHY3djaE53TkEwcUZfbVY1MkxTa3Bpb25aclNhLWUzV2dLeEt4VlVFcWM/remove.mermaid.div.js"></script>
<!-- Code for the Mermaid (Flowchart) Plugin -->
<script src="https://a1b162c9ba316380004223e5ebcd9fd144cbffea.googledrive.com/host/0B94LsQPLeilLfkxHY3djaE53TkEwcUZfbVY1MkxTa3Bpb25aclNhLWUzV2dLeEt4VlVFcWM/mermaid.min.js"></script>
<!-- Code to Initialize the Mermaid (Flowchart) Plugin -->
<script>mermaid.initialize({startOnLoad:true});</script>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.
Is this still a valid technique in late 2018 @Mittineague?
1 Like