Skip to content

RTE: Custom CSS properties #7345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 27, 2025
Merged

RTE: Custom CSS properties #7345

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f4c6da4
RTE: Custom CSS properties
leekelleher Aug 27, 2025
804efb1
Vale correction: Expanded "RTE" acronym
leekelleher Aug 27, 2025
41cf79d
Updated SUMMARY.md
leekelleher Aug 27, 2025
3b6806b
Updated links
sofietoft Aug 27, 2025
677d734
Update css-properties.md
sofietoft Aug 27, 2025
339942e
Small change to trigger checks
sofietoft Aug 27, 2025
38da1a3
Updated RTE base class link
leekelleher Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions 16/umbraco-cms/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
* [Dropdown](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md)
* [Rich Text Editor](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md)
* [Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md)
* [Custom CSS properties](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md)
* [Extensions](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md)
* [Style Menu](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md)
* [Login](fundamentals/backoffice/login.md)
Expand Down
4 changes: 4 additions & 0 deletions ...e/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ Use Blocks to define specific parts that can be added as part of the markup of t

Extend the functionality of the Rich Text Editor with extensions.

## [Custom CSS properties](css-properties.md)

Customize the appearance of the Rich Text Editor with custom CSS properties.

## Data Type Definition Example

![Rich Text Editor - Data Type](images/rte-tiptap-datatypedefinition.png)
Expand Down
35 changes: 35 additions & 0 deletions ...ty-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# Custom CSS properties

Customize the appearance of the Rich Text Editor with custom CSS properties.

You can customize appearance of the Rich Text Editor using CSS properties by defining them in your CSS files.

For example, to set minimum height of all Rich Text Editors throughout the backoffice. You could use the following CSS rule:

```css
:root {
--umb-rte-min-height: 300px;
}
```

For general information on working with stylesheets and JavaScript in Umbraco, check [Stylesheets and JavaScript](../../../../design/stylesheets-javascript).

Check warning on line 15 in 16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] Use ''JavaScript'' instead of 'JavaScript' for consistency.

Raw Output:
{"message": "[UmbracoDocs.Names] Use ''JavaScript'' instead of 'JavaScript' for consistency.", "location": {"path": "16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md", "range": {"start": {"line": 15, "column": 103}}}, "severity": "WARNING"}

Check warning on line 15 in 16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] Use ''JavaScript'' instead of 'JavaScript' for consistency.

Raw Output:
{"message": "[UmbracoDocs.Names] Use ''JavaScript'' instead of 'JavaScript' for consistency.", "location": {"path": "16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md", "range": {"start": {"line": 15, "column": 57}}}, "severity": "WARNING"}

If you wanted to target a specific Rich Text Editor, you can set the [stylesheet directly in the configuration](configuration.md#stylesheets).


## Custom CSS properties reference

The following CSS properties are available for customization:

| CSS Property | Description | Default Value |
| ---------------------- | ------------------------------------------ | ------------- |
| `--umb-rte-width` | The width of the rich-text-editor | `unset` |
| `--umb-rte-min-width` | The minimum width of the rich-text-editor | `unset` |
| `--umb-rte-max-width` | The maximum width of the rich-text-editor | `100%` |
| `--umb-rte-height` | The height of the rich-text-editor | `100%` |
| `--umb-rte-min-height` | The minimum height of the rich-text-editor | `100%` |
| `--umb-rte-max-height` | The maximum height of the rich-text-editor | `100%` |


The CSS custom properties may change in future versions of Umbraco. You can always find the latest values in the [Rich Text Editor component base class](https://github.com/umbraco/Umbraco-CMS/blob/release-16.2.0/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository.

Loading