Configure CSS stylesheet used by editor
As a programmer, I need a mechanism to attach a CSS style to the editor so that the edited content resembles my website.
As a programmer, I want to configure the CSS style of the rich text editor from a single place.
As a programmer, I want to use the CSS rules both when editing and displaying (rendering) the content edited using Canvas Editor.
As a programmer, I want to override the colors in the CSS document with the colors from the Material UI theme.
You can configure the Canvas Editor rich text editor to use a custom CSS style. The CSS style is configured via the IOC container.
For this, the "CSS_DOCUMENT" property of the IOC container needs to be set:
1defaultIOC.bind('CSS_DOCUMENT', {creation: IOCInstance.SINGLETON, value: new CSSDocument(DEFAULT_CSS)})
The CSSDocument class has the following declaration:
1declare class CSSDocument {
2 constructor(cssText: string);
3}
The cssText parameter used when initializing the CSSDocument class must contain CSS rules parsable by the CSS engine used by Canvas Editor. Only a subset of CSS properties is parsed, and only a subset of rule values is renderable by Canvas Editor.
1@font-face {
2 font-family: "Roboto";
3 --font-match: "sans-serif", "sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
4}
5
6@font-face {
7 font-family: "Roboto Mono";
8 --font-match: "monospace", 'JetBrains Mono';
9}
10
11@font-face {
12 font-family: "Noto Serif";
13 --font-match: "serif";
14}
15
16* {
17 font: 16px/20px Roboto;
18 font-family: 'Roboto';
19 margin: 0;
20 padding: 0;
21 vertical-align: auto;
22 color: #000000;
23 font-weight: normal;
24 font-style: normal;
25 text-align: left;
26 border: 0 solid #000000;
27 border-collapse: separate;
28 width: auto;
29 height: auto;
30 background-color: transparent;
31 caret-color: #000;
32 caret-shape: bar;
33 text-decoration-color: currentColor;
34 text-decoration-style: solid;
35 text-decoration-line: none;
36}
37
38::selection {
39 background-color: #009dff;
40}
41
42p {
43 margin: 5px 0;
44}
45
46blockquote {
47 margin: 5px 10px;
48 border-left: 5px solid #bbb;
49 padding-left: 25px;
50}
51
52h1 {
53 font-size: 32px;
54 margin: 21px 0;
55 font-weight: bold;
56 line-height: 32px;
57}
58
59h2 {
60 font-size: 24px;
61 margin: 20px 0;
62 font-weight: bold;
63 line-height: 24px;
64}
65
66h3 {
67 font-size: 18px;
68 margin: 19px 0;
69 font-weight: bold;
70 line-height: 18px;
71}
72
73h4 {
74 font-size: 16px;
75 margin: 19px 0;
76 font-weight: bold;
77 line-height: 16px;
78}
79
80h5 {
81 font-size: 13px;
82 margin: 22px 0;
83 font-weight: bold;
84 line-height: 13px;
85}
86
87h6 {
88 font-size: 10px;
89 margin: 22px 0;
90 font-weight: bold;
91 line-height: 10px;
92}
93
94ul, ol {
95 padding-left: 40px;
96 margin-left: 5px;
97 margin-bottom: 5px;
98}
99
100li {
101 margin-top: 5px;
102 margin-bottom: 5px;
103}
104
105pre {
106 margin: 13px 0;
107 font-size: 13px;
108 line-height: 16px;
109}
110
111table {
112 border: 1px solid black;
113 border-collapse: collapse;
114 width: 100%;
115}
116
117tr {
118}
119
120td {
121 border: 1px solid black;
122 padding: 5px;
123}
124
125a {
126 text-decoration: underline;
127 color: blue;
128}
129
130b, strong {
131 font-weight: bold;
132}
133
134i, em, cite, dfn {
135 font-style: italic;
136}
137
138u, ins {
139 text-decoration: underline;
140}
141
142sub {
143 vertical-align: sub;
144}
145
146sup {
147 vertical-align: super;
148}
149
150sub, sup {
151 font-size: 12px;
152}
153
154code, pre, kbd, var {
155 font-family: 'Roboto Mono';
156}
157
158pre {
159 margin: 5px 0;
160}
161
162img {
163 width: 100px;
164 height: auto;
165 border: 2px solid black;
166}
167
168abbr, acronym {
169 text-decoration-line: underline;
170 text-decoration-style: dotted;
171 text-decoration-color: currentColor;
172}
173
174big {
175 font-size: larger;
176}
177
178small {
179 font-size: 13px;
180}
181
182del {
183 text-decoration-line: line-through;
184 text-decoration-style: solid;
185 text-decoration-color: currentColor;
186}
187
188s, strike {
189 text-decoration-line: line-through;
190 text-decoration-style: solid;
191 text-decoration-color: currentColor;
192}
Supported CSS Properties:
| Property Family | CSS Property | Format | Parsable | Functionality |
|---|---|---|---|---|
| Background | background background-color | css_color | Yes | Block elements only |
| Border | border border-top border-right border-bottom border-left | css_length css_border_style css_color | Yes | Block elements only |
| border-color, border-top-color, border-right-color, border-left-color, border-bottom-color | css_color | Yes | Block elements only | |
| border-style, border-top-style, border-right-style, border-bottom-style, border-left-style | dotted | dashed | solid | Yes | Block elements only | |
| border-width, border-top-width, border-right-width, border-bottom-width, border-left-width | css_length | Yes | Block elements only | |
| border-collapse | collapse | separate | Yes | Table only, forced to collapse | |
| Cursor | caret-color | css_color | Yes | Block elements only |
| caret-shape | bar | block | underscore | Yes | Block elements only | |
| Text | color | css_color | Yes | Yes |
| font | font_size font_family font_style font_weight line_height | Yes | font-variant is ignored | |
| font-family | string, e.g.: "Roboto Mono" | Yes | Google fonts only | |
| font-weight | css_font_weight | Yes | 400 and 700 works, rest is 400 | |
| font-size | css_length | Yes | Yes | |
| font-style | italic | oblique | normal | Yes | Yes | |
| line-height | css_length | Yes | Yes | |
| text-align | css_text_align | Yes | justified renders as left | |
| text-decoration | none | underline | line-through | overline | blink | Yes | "blink" not implemented | |
| text-decoration-color | css_color | Yes | ||
| text-decoration-line | none | underline | overline | line-through | Yes | Inline elements only | |
| text-decoration-style | solid | double | dotted | dashed | wavy | spelling-error | Yes | Only solid, dotted and dashed work | |
| vertical-align | sub | bottom | super | top | middle | center | baseline | text-bottom | unset | Yes | CSS length format not implemented (eg: vertical-align: 20px) | |
| Margin | margin margin-top margin-right margin-bottom margin-left | css_length | Yes | Block elements only |
| Padding | padding padding-top padding-right padding-bottom padding-left | css_length >= 0 | Yes | Block elements only |
| Dimensions | width height | css_length >= 0 | Yes | Img and Table only |
Supported HTML Tags:
Block Elements:
- p
- h1
- h2
- h3
- h4
- h5
- h6
- ul
- ol
- li
- table
- tr
- td
- pre
- blockquote
- div (converted to P)
Inline Elements:
Canvas Editor supports the following inline HTML tags:
- img
- br
- a
- abbr
- acronym
- b
- big
- cite
- code
- del
- dfn
- em
- i
- ins
- kbd
- label
- q
- s
- samp
- small
- span
- strong
- strike
- sub
- sup
- time
- tt
- u
- var
All other HTML tags are either ignored or converted to other supported types.
Supported CSS Selectors in Canvas Editor
- Universal selector * (e.g., * { ... })
- Tag selector (e.g., p { ... })
- @font-face { ... }
All other types of CSS selectors are not implemented.
CSS Inheritance
Everything declared in the universal selector * functions as the default value for any unspecified value in other selectors. For example, in the following CSS document:
1* {
2 color: red;
3 margin: 2px;
4 ...
5}
6
7p {
8 margin: 1px;
9}
- The color of the p tag is "red" because it is not specified in the p selector.
- The color of the h1 tag is also red because the h1 tag is not declared in the CSS document.
@font-face CSS Rule
In a CSS document, you can use multiple @font-face blocks. The @font-face blocks indicate to the editor which fonts to automatically load from Google Fonts.
In this @font-face block, the significance of the rules is as follows:
1@font-face {
2 font-family: "Roboto";
3 --font-match: "sans-serif", "sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
4}
The "Roboto" font is automatically loaded from Google Fonts.
All elements using font-family: "sans-serif", "sans", –apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, or Arial will be displayed using the "Roboto" font.
Limitations
- The universal selector * is mandatory in a CSS style supported by Canvas Editor and must contain default values for all CSS properties implemented by the rendering engine.
- All fonts used by the CSS rules must be declared with the @font-face selector.