I am trying to add a style attribute to an img tag in HTMLText markup view. But every time I save or publish, the attribute is stripped.
I found this documentation ("Setting options" - about half way down). So tried that in my /app/_config.php file and did a /dev/build:
HtmlEditorConfig::get('cms')->setOption(
'extended_valid_elements',
'img[style]'
);
After doing the above, img src was stripped. Because according to this documentation the tag rules completely replace existing rules for that tag. Which in Silverstripe's case are found in /vendor/silverstripe/admin/_config.php. The point is, this confirms the above config is definitely being used by Silverstripe.
But the style attribute is still being stripped out on save.
Related
Reproduction
https://codepen.io/wqh/pen/KKqjaWL
Steps to reproduce
First, Sorry for my bad English, I hope you can understand what I mean.
Open the codepen link and you can see the phenomenon in the developer tools :
the generated style tag has no content, but actually effective.
The example is of a low version, but the 5.3.3 version of my project has the same problem
Expected Behavior
The content of the generated style tag can also be obtained in production mode.
I saw a Q&A that said that the insertRule will cause the content of the style tag to be unavailable.But I use the css-vars-ponyfill to fix vars in IE11, this needs to get the content of the style tag .
Actual Behavior
In production mode, the generated style tag has no content, this is inconsistent with the development model
Styles get injected in the DOM differently in development and in production environments.
As mentioned here (How styles land in the DOM),
This step differs from development mode to production mode.
In development mode, styled-components will inject a style tag inside the head of the page's DOM. This tag will include some data meta properties like the library's version used. And inside the tag, styled-components will append all the styles from your StyledComponents bound to their classNames.
In production mode however, things are a bit different. Since we need to optimize and compress stuff the most we can, the style tag injected by styled-components will still be there, but will be injected as empty.
Edit:
styled-components is handling it differently for 5.0.0 onwards.
As mentioned here:
Modifying the way CSS is injected
The property disableCSSOMInjections allows us to switch from the CSS
Object Model (CSSOM) API to a text node-based CSS injection system.
When a browser parses the HTML code of a page, in addition to creating
a tree of nodes called the DOM (Document Object Model), it creates a
CSS object model in the form of a tree where each node contains CSS
style information for a particular DOM element.
This way, to insert or modify the style of a particular node, we can
use either the DOM API:
document.getElementById('myDiv').style.background = 'blue' Or the
CSSOM API:
// Assuming there's a stylesheet in the HTML page const style =
document.styleSheets[0]; style.sheet.insertRule('#myDiv{background-color: blue}');
This way, when the property
disableCSSOMInjections is present or you assign it the value true:
ReactDOM.render(
<StyleSheetManager disableCSSOMInjections={true}>
<App />
</StyleSheetManager>,
root
);
I recently was using create-react-app and noticed that the <a> tag in App.js was using the noopener noreferrer attributes. I also noticed that scattered throughout our code-base, are <a> tags which do not use the above attributes.
I wanted to, using grunt-htmllint, add a rule that would enforce the adding of these attributes but am having trouble with the value that I should add to what I think would be "tag-req-attr".
The documentation for the rule is listed here, but the usage for me is confusing. How can I set the specified <a> tag to include said rules?
I am looking for a way to enforce that the rel attribute contains both noopener and noreferrere.g.:
My Link
Thanks
According to, https://developers.google.com/web/tools/lighthouse/audits/noopener, it looks like noreferrer handles both cases: rel="noreferrer" attribute has the same effect, but also prevents the Referer header from being sent to the new page.
In that case, simply using the link-req-noopener rule should be sufficient.
Suppose I want all <textarea>s to have some property, but I don't want to modify all pages individually. The website uses a common .css file for all pages.
If it's a change of fonts, padding, paragraph colouring, etc, it's easy, I modify the site .css file and all pages inherit.
But what about adding attribs like onkeydown="STRING" (sorry, not onclick) or autocomplete="off" - can I do that in any way through the .css file, or do I have no choice but hard-coding in each textarea or adding an onload script to every page that has text area elements?
From my answer here:
CSS is not HTML. You cannot set or change the value of an HTML attribute using CSS.
[...]
If you're trying to assign metadata to a class name which then applies to all elements with that class name, that's (again) completely outside of the purview of CSS, and simply not possible in HTML. The only way to assign metadata to an element is to specify it as an attribute on that element. (You can move the attribute declarations to a script if you don't want to specify the attributes on every instance of that class within the markup, but at the end of the day the script still has to populate each element's dataset with those values. Depending on your needs, though, this may be sufficient.)
You don't need to add an onclick handler to every page that contains textareas. You can put the handler in a script and link to that script in every page, just as you would a stylesheet. If you mean you want to do this from the stylesheet alone without modifying the pages or introducing another external file, then the point about CSS not being HTML, or JavaScript for that matter, remains.
If that's still not an option, I'm afraid there are no alternatives. There certainly aren't any for the autocomplete attribute.
I am wondering if there is a way to use custom css for some specific text on my confluence page (not using embedded HTML).
Sorry this is an old question, but for the sake of people who search for an answer to this question: you can use span or div macros and use the custom css to apply whatever style you want to their contents.
If necessary, you could create custom div and span classes to allow for multiple styles to be applied to selections of text.
EDIT: Here is an example of the wikimarkup you could use to do this
{div:class=customCss|style=float:left; margin-right:50px}
Custom text in a div
{div}
So you can either use the div class and apply a style in the custom css for the confluence space, or you can use an inline style for the div.
You can do this ...
{composition-setup}import.css=/download/attachments/123456789/custom.css
{composition-setup}
That's if you've stored a custom.css file as an attachement. You'd obviously need to replace 123456789 with the actual attachment number.
You can also link CSS on an external site (with an absolute URL), but if you have any automatic URL formatting, that tends to mess it up everytime you change the document.
I use a User Macro that renders the $body in HTML. Then I can put whatever HTML tags I want in the wiki page within the user macro tag.
There could be a way to reach what you want to reach, but there is some information missing (from you). What confluence allows is the following:
If you have admin rights to the confluence wiki space, you could add there a custom style sheet that applies to all wiki pages. Else you could follow the answer of Mus.
Then you should analyse the wiki page in source form. So load a wiki page you want to style, and look at the source of that wiki page in your browser. Depending on your browser, this may be CTRL-U or something similar. Here in chrome, the page menu says View page source.
Try to find the defining selector for your wiki text you want to style in some form. A reasonable hack could be:
Find a wiki style that is not used by others. I have experimented with ~subscript~.
Find the HTML tags that are built by using that style. In my example, it was <sub>subscript</sub>.
Use your custom style sheet to style text of that style.
However, this may change the text where the style is used for its original sense :-(
You can specify custom CSS in your Confluence page via the div and span macros.
In recent Confluence versions (4.0 and later), you can do this as follows:
Type {div} or {span}. On typing the closing brace }, auto-complete will convert the text to a macro.
Left-click on the frame of the macro and select the Edit button
Enter the custom CSS into the Style field and close the dialog
Enter your text into the macro frame. It will then have the style you specified.
I am trying to render a complex XML document as webpage(FF only) using a stylesheet. In one of the tag the content itself is part of the a attribute value
<projectMember>
<Role roleType="CHANGE ADMINISTRATOR III"/>
</projectMember>
<projectMember>
<Role roleType="CHANGE ADMINISTRATOR I"/>
</projectMember>
I need to display the value of roleType in Firefox using css selectors. I dont want to use XLST or Javascript as modifying XML source is last option.
You might be able to use "content" and the attr css function.
To see a similar solution used to print the href of a link after the link in print media, goto http://www.alistapart.com/articles/goingtoprint/ and scroll down the page to the heading "Printed links"
it might look something like this in the end:
content: attr(roleType);