---
title: CMSEditableRegion
related:
  - https://docs.kentico.com/k8/developing-websites/developing-websites-using-aspx-templates.md
  - https://docs.kentico.com/k8/managing-website-content/configuring-the-environment-for-content-editors/enabling-on-site-editing.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The CMSEditableRegion control displays a region where website editors can enter a wide range of content.

- The control provides editing functionality on the **Page** tab of the **Pages** application and when viewed in on-site editing mode.
- On the live site, the control displays the content of the region without the editing interface.

> **Info:** **Web part equivalent (portal engine)**: Editable text

> **Note:** **CMSPortalManager required**
>
> The CMSEditableRegion cannot communicate with the database directly and it requires the **CMSPortalManager** control to load and save the region content. You only need one manager control for any number of editable region controls.
>
> It is recommended to add the CMSPortalManager to the [master page](https://docs.kentico.com/k8/developing-websites/developing-websites-using-aspx-templates/creating-master-pages-for-aspx-templates.md) used by your ASPX templates.

## Getting started

The following tutorial shows how to display a region that serves as an HTML WYSIWYG editor:

1. Create a new [ASPX page template](https://docs.kentico.com/k8/developing-websites/developing-websites-using-aspx-templates/creating-aspx-page-templates.md) (with a master page).
2. Select the **CMSTemplates/CorporateSite/root.master** file as the web form's master page.
   - The default master page contains the required _CMSPortalManager_ control.
3. In Visual Studio, drag the **CMSEditableRegion** control from the toolbox onto the page template's form.
4. Set the following properties for the control:

   - **RegionTitle**: Region Example
   - **DialogHeight**: 200
   - **RegionType**: HTMLEditor
   - **HTMLAreaToolbarLocation**: In

```csharp

<cms:CMSEditableRegion ID="CMSEditableRegion1" runat="server" RegionTitle="Region Example" DialogHeight="200" RegionType="HTMLEditor" HtmlAreaToolbarLocation="In" />

```

5. Create a page based on the template in the Kentico administration interface.

The control displays an editable region in the **Edit** mode of the **Pages** application.

![](https://docs.kentico.com/docsassets/k8/cmseditableregion/CMSEditableRegion.png)

If you enter content into the region and click **Save**, the control displays the given content on the live version of the page.

## Configuration

You can set the following properties for the CMSEditableRegion control:

| Property name           | Description                                                                                                                                                                                                                                                     | Sample value                                                                                       |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| DialogHeight            | Height of the region in pixels.                                                                                                                                                                                                                                 |                                                                                                    |
| DialogWidth             | Width of the region in pixels.                                                                                                                                                                                                                                  |                                                                                                    |
| HtmlAreaToolbar         | Specifies the name of the HTML editor toolbar set. Only applies if you set the **RegionType** property to _HtmlEditor_.                                                                                                                                         | "Default"                                                                                          |
| HtmlAreaToolbarLocation | Determines the location of the HTML editor toolbar. Only applies if you set the **RegionType** property to _HtmlEditor_.                                                                                                                                        | "In" for inline - directly above the region<br>"Out:CKToolbar" for shared - at the top of the page |
| InheritContent          | If true, the control attempts to display content from an ancestor page if the region is empty. The control loads the content from the nearest ancestor document in the content tree hierarchy that contains a CMSEditableRegion control with a matching **ID**. |                                                                                                    |
| MaxLength               | Sets the maximum length of the content (in number of characters).                                                                                                                                                                                               |                                                                                                    |
| MinLength               | Sets the minimum allowed length of the content (in number of characters).                                                                                                                                                                                       |                                                                                                    |
| RegionTitle             | Title displayed above the editable region in editing mode.                                                                                                                                                                                                      |                                                                                                    |
| RegionType              | Sets the type of control that the editable region uses in editing mode: Textbox, Text area or HTML editor.                                                                                                                                                      | "HtmlEditor"<br>"TextArea"<br>"TextBox"                                                            |
| WordWrap                | Indicates whether text displayed by the control uses word wrapping if the _TextArea_ **RegionType** is selected.                                                                                                                                                |                                                                                                    |

> **Note:** **Note**: Do not modify the remaining properties of the control. They are used internally by the system.

## Appearance and styling

The appearance of the CMSEditableRegion control is determined by CSS classes. You can use the following CSS classes to modify the design of the control:

| CSS class name         | Applies to                                                               |
| ---------------------- | ------------------------------------------------------------------------ |
| CMSEditableRegionEdit  | The main  element surrounding the output of the control in editing mode. |
| CMSEditableRegionTitle | The element containing the region title.                                 |
| CMSEditableRegionError | The element containing the error message label.                          |

The recommended place to define these classes is in a Kentico [stylesheet](https://docs.kentico.com/k8/developing-websites/designing-websites-using-css.md) using the **CSS stylesheets** application.

You can apply stylesheets to:

- Entire websites
- Individual documents (pages) that contain the control
