For CKeditor, is there a way to have it apply a class name instead of a style? So instead of doing:
<span style="color: #ffffff;">Text</span>
It would do:
<span class="white">Text</span>
Simplified to make more sense, but except for the typical bold/italics/underline, we need to be able to use variables in a SCSS sheet for consistency and multiple clients. This would not be something picked from a custom style list - it needs to be automatic when people click on existing toolbar options. Has anyone managed something like this?
Try to put this code in your config.js file:
config.stylesSet = [
{ name: 'CSS White', element: 'span', attributes: { 'class': 'white' } }
]
It will show you a 'CSS White' option in the style select field of your ceditor.
Related
I am wondering if it is possible to do a block transform that uses a createBlock function that can set a className on a block. I also wonder if a block transform that uses a createBlock function can target a block variation.
I am working on a WordPress shortcode block transform and have slowly figured out how to make it work (see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/#shortcode). The code so far will allow you to copy and paste into the WordPress editor (I think you have to use right click and paste match styles {let me know if that is also wrong}) and will create a group with 2 paragraphs inside it. The last thing I am trying to figure out is if I can apply a box shadow block style (that is already registered) to the group during the transform. Currently I am trying to do that with className and have tried style, styles, etc...) I have tried to look through source code and many documentation pages, but I am not finding if that is possible. I was trying to just do it with className and it doesn't appear to work.
const transforms = {
from: [
{
type: 'shortcode',
tag: ["shadow"],
priority: 1,
transform: ( attrs, shortcodeObj ) => {
return createBlock( 'core/group', { className: "is-style-box-shadow" }, [
createBlock( 'core/paragraph', { content: attrs.named.heading }),
createBlock( 'core/paragraph', { content: shortcodeObj.shortcode.content })
] );
}
}
],
};
And this is the shortcode to paste into the editor
[shadow heading="Heading Test"]
This content should be accessible in the transform
[/shadow]
Alternatively, another solution would be to transform to a block variation that already has the block style defined, but I am not finding if that is possible either. Any advice would be really helpful to trying to perfect copy and paste into WordPress.
The docs are clear on using error styles for form inputs such as text fields. But how do I use the same style on a custom element such as a text label for a file upload button, or any other custom component that might not fit the a pre-defined component?
Edit for clarity: I don't want to just choose a color I like and plop it in my css with an appropriate selector. I want to make sure I'm using the same error color as the theme, whether that's the default, some imported theme, or custom (if custom it's pretty easy, but not DRY, to just use the same value in css).
Specifically, in this use case, I want to limit users to uploading files less than 100MB, and display an error message if they have selected a file larger than this limit. I'd like to display the text in the error style of the configured theme, but from the material-ui docs I can only see how to set error properties of pre-packaged components such as text fields.
So here I have, simplified:
<input
accept="video/*"
id="file-upload-button"
type="file"
onChange={(e) => {this.fileChanged(e);}}
/>
<label htmlFor="file-upload-button">
<Button variant="contained" component="span" color="default">
Browse video
</Button>
<br /><small>(Max size: 100MB)</small>
</label>
where the input tag has display: none applied via a css file. Also,
fileChanged(e) {
let file = e.target.files[0];
let sizeMB = file.size / 2**20;
this.setState({
selectedFile: e.target.files[0],
fileTooLarge: sizeMB > 100
});
}
How do I get the theme's error color to apply it to the "Max Size" message or other element?
3 steps to solve your issue:
You have to inject the theme into your app with the theme provider (apply to v3 MUI, but should be similar with v4 now). See doc.
You can then customize the theme, like such:
const theme = createMuiTheme({
palette: {
error: {
main: "#ff604f"
}
}
}
Finally you can use your custom color by injecting styles into your component with withStyles() (or useStyles() in v4 hook for instance) and create your styles const in your component, example:
const styles = theme => ({
button: {
backgroundColor: theme.palette.error.main,
}
}
Note: using error as a palette variable name will override the
default error color value.
Possible duplicate of:How to add a class with React.js?
You could give an ID and then: getElementById.classList.add("errorClass");
Then if the user uploads the proper size: getElementById.classList.remove("errorClass");
I am trying to style PrimeNg's dropdown icon.
https://www.primefaces.org/primeng/#/dropdown
Here is how it currently looks and what I'm trying to get it to look like.
I'm guessing I have to style the
ui-dropdown-trigger
but I'm not sure what to set it to.
I tried background-color but that didn't work.
Another thing I tried was to just set it as an attribute like:
<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>
Any ideas?
Edit:
This is how I got the desired output:
Turned off encapsulation (reference)
Added the following code to the css:
body .ui-dropdown .ui-dropdown-trigger {
background-color: #2399E5;
color: white;
}
To change the dropdownicon property itself, you need to do 2 things:
1)You will need to create a var in the component.ts in which you will put the string of the icon you want. But you will have to add 'fa fa-fw' at the begining of the string. For example, if you want to put a 'fa-star', the complete string will be 'fa fa-fw fa-star'
export class AppComponent {
star = 'fa fa-fw fa-star';
constructor(){}
}
2)In the component.html, you have to add [dropdownIcon]=var
<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>
And the result will look like
https://i.stack.imgur.com/WZDVx.png
You can set it as an attribute using:
<p-dropdown ... [style]="{'background-color': 'black'}" ...></p-dropdown>
or you can style the ui-dropdown-trigger but, you would have to do it in the global style sheet, not the component's.
To style ui-dropdown-trigger inside the component's css file you would have to use
:host >>> .ui-dropdown-trigger {...}
but, this has been deprecated.
I use included bootstrap theme from primeng. So I have to adapt:
body .ui-dropdown .ui-dropdown-trigger {
background-color: blue;
}
in the CSS to colorize the trigger in the theme.
I'm using Redactor v9.2.1. I'm trying to allow my customers to use style tags in their CMS, but redactor strips them from the content.
When I add the following:
<style type="text/css">
.red{color:red;}
</style>
redactor strips it to:
<p>
.red{color:red;}
</p>
I've made sure that deniedTags is not including 'style' in my settings object and I'm not using the allowedTags attribute since it conflicts with deniedTags.
Here is my settings object that I'm passing to the redactor init:
var settings = {
deniedTags:[
'html', 'head','link', 'body', 'meta', 'applet'
],
observeLinks: true,
iframe: true,
convertVideoLinks: true
};
Any help is appreciated.
http://imperavi.com/redactor/docs/settings/clean/#setting-deniedTags
Top-level HTML tags ('html', 'head', 'link', 'body', 'meta', 'style',
'script', 'applet') will always be removed regardless of this setting,
unless wrapped in 'pre' tag (formatting option 'Code')
Edit
So you can't add a style tag inside the editor, as I read in the docs. Seems like you have these options:
Style individual tags outside the editor: You add the parent selector .redactor-editor and then the tag name. See http://imperavi.com/redactor/examples/typography/
Add several formattingAdd options to let users pick up custom styles from the formatting dropdown:
$('#redactor').redactor({
formattingAdd: [
{
tag: 'p',
title: 'Red Block',
class: 'red-style'
}
]
});
/**
* The above would create a new formatting entry,
* which you define with 2 css selectors:
* one for the class of the entry, another for the dropdown entry
*
* .red-style, .redactor-dropdown .redactor-formatting-red-style {
* color: red;
* }
*/
Notice css selector rule for the dropdown, which is .redactor-dropdown .redactor-formatting-YOUR_CSS_CLASSNAME. This also is important:
formattingAdd can only be applied to p, pre, blockquote and header
tags.
So you can't apply it to <div>. If you need block element, use <p>. Also, if you need inline, you CAN use <span>... it works, see fiddle: http://jsfiddle.net/a4df10vj/1/
In my project I have a requirement to remove the paragraph format like "Address" and "Formatted" from the drop down and to add a new custom format called "Links" which would be Arial, 14px, bold, red. Is it possible to add custom paragraph format in CKEditor?
Use CKEDITOR.config.formatTags to specify some new formatting:
CKEDITOR.replace( 'editor1', {
format_tags: 'p;h2;h3;pre;links', // entries is displayed in "Paragraph format"
format_links: {
name: 'Links',
element: 'span',
styles: {
color: 'red',
'font-family': 'arial',
'font-weight': 'bold'
}
}
} );
To know more about styles see how CKEDITOR.styleSet works. Also note that since CKEditor 4.1, removing styles from "Paragraph format" has an impact on Advanced Content Filter.
Since you're working with Drupal, ckeditor.styles.js is the file you're looking for, this will allow you to add/edit/remove entries in the Styles menu.
Comment out any entries you don't want, and use something like this to add a new paragraph format:
{ name : 'Links', element : 'p', attributes : { 'class' : 'links' } },
This will add the CSS class links to whatever paragraph you want, and you can define the class in your theme stylesheet. Make sure to define the class in ckeditor.css if you don't see the changes applied in the CKEditor instance.
Alternatively, you could also apply the inline styles directly:
{ name : 'Links', element : 'p', attributes : { 'style' : 'font: bold 14px Arial, sans-serif; color: red;' } },
But the first method is clearly more flexible/clean.
Make sure to clear your Drupal and/or browser cache if you don't see your changes show up immediately.