defaultStyles
Description
Optional. Specifies default style values for specific block types
Usage
defaultStyles?: {
"*"?: { // affects all blocks, allowing you to set common properties for all of these blocks
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
p?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
blockquote?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
h1?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
h2?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
h3?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
h4?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
h5?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
},
h6?: {
"font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
"font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
color?: string;
background?: string;
}
};
important
The defaultStyles
property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately:
index.js
new richtext.Richtext("#root", {
defaultStyles: {
h2: {
"font-family": "Roboto",
"font-size": "28px",
color: "purple",
background: "#FFC0CB"
}
}
});
index.css
<style>
#root h2 {
font-family: Roboto;
font-size: 28px;
color: purple;
background: #FFC0CB;
}
</style>
In this example, all h2
blocks are assigned to the "Roboto"
font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles assigned to h2
blocks as well.
Default config
const defaultStyles = {
"*": { "font-family": "Arial" },
p: { "font-size": "14px" },
blockquote: { "font-size": "14px" },
h1: { "font-size": "32px" },
h2: { "font-size": "24px" },
h3: { "font-size": "18px" },
h4: { "font-size": "16px" },
h5: { "font-size": "14px" },
h6: { "font-size": "12px" }
};
Example
// initialize RichText
new richtext.Richtext("#root", {
defaultStyles: {
h4: {
"font-family": "Roboto"
},
h5: {
"font-family": "Roboto"
},
h6: {
"font-family": "Roboto"
}
},
// other configuration properties
});
Change log: The property was updated in v2.0
Related articles: Configuration
Related sample: RichText. Changing the default value for typography (font, font size, etc.)