Merge pull request #7345 from umbraco/v16/cms/rte-css-props

RTE: Custom CSS properties

Author: sofietoft

16/umbraco-cms/SUMMARY.md

@@ -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)

16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md

@@ -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)

16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md

@@ -0,0 +1,35 @@
+# Custom CSS properties
+
+Customize the appearance of the Rich Text Editor with custom CSS properties.
+
+You can customize the appearance of the Rich Text Editor using CSS properties by defining them in your CSS files.
+
+For example, to set the 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.md).
+
+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/main/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository.
+