Text Editable Regions are one type of Editable Region you can add to your layout and HTML-like files to enable visual editing. Text Editable Regions allow you to edit text values stored in front matter, content, or HTML with plain text or rich text formatting options.
To avoid misconfiguration issues where CloudCannon cannot find the data property you want to edit, always add Editable Regions to values closest to the root of the file first (i.e., work from parent elements towards child elements).
These instructions assume you have configured your build settings and are comfortable editing HTML layouts, either in CloudCannon's Source Editor or your local development environment.
To configure Text Editable Regions in the Visual Editor:
- Identify the file you want to which you want to add a Text Editable Regions. We recommend any layout files that contain templating that is populated by content files at build time.
- Open the file in CloudCannon's Source Editor or your local development environment.
- Identify the HTML tag that contains your templating and add the HTML attribute
data-editable="text". If no DOM element is available, you can wrap the templating in the<editable-text>web component. - Add the
data-prop=""HTML attribute to the same DOM element, or to the<editable-text>web component. The value ofdata-propshould be the path the to data property you want to edit. - Save the change to your Site. CloudCannon will automatically rebuild your Site.
When you open the file in the Visual Editor, CloudCannon will show yellow Editable Region boxes around the text field. If your text field contains rich text, CloudCannon will show a WYSIWYG toolbar for formatting your content when you click into the Editable Region.
Want to make a standalone HTML-like file visually editable?
We recommend configuring Source Editable Regions to HTML-like files (i.e., files that contain HTML structure and templating, like .astro or .liquid) rather than several Text and Image Editable Regions.
Examples#
Here are a few examples of different Text Editable Regions:
<h1 data-editable="text" data-prop="title" >{title}</h1>
The data-editable attribute defines what kind of data this element contains, and the data-prop attribute defines the path to the data we want to edit. In this case, we want a Text Editable Region, so the value of data-editable is text, and we want to edit the title structured data key in the file front matter.
<p>By: <editable-text data-prop="author">{author}</ editable-text></p>
The <editable-text> web component defines what kind of data this element contains, and the data-prop attribute defines the path to the data we want to edit. In this case, we used the web component to wrap the {author} templating specifically, and we want to edit the author structured data key in the file front matter.
<text-editable data-prop="@content">
<slot />
</text-editable>
The <editable-text> web component defines what kind of data this element contains, and the data-prop attribute defines the path to the data we want to edit. In this case, we used the web component to wrap the <slot /> element, which will be populated by Markdown content at build time, and we want to edit the Markdown content of the file, as signified by the special value @content.
WYSIWYG toolbar formatting options#
Depending on whether your Editable Region contains plain text or rich text, CloudCannon may show you a WYSIWYG toolbar with different formatting options. These options are controlled by the data-type HTML attribute. You can manually define this attribute, or rely of CloudCannon's default behavior.
The data-type attribute accepts three values: span for plain text, text for paragraph-level rich text formatting options (e.g., bold, links, superscript), or block for multi-paragraph rich text formatting (e.g., bulleted lists, quote blocks).
When data-type is not defined, CloudCannon uses block or text for any Source Editable Regions, data-prop="@content", or Rich Text Inputs, and span where Input type is not Rich Text, or is not configured.
If you want to specify exactly which formatting tools are available, you can manually define your WYSIWYG toolbar under the _editables key in your CloudCannon Configuration File. For more information, please read our documentation on Configuring your rich text editors.
Misconfigured Text Editable Regions#
CloudCannon will display an orange warning box in the Visual Editor if your Text Editable Regions is misconfigured.
Text Editable Regions are misconfigured if:
- You did not define the
data-propHTML attribute. - The Editable Region has an invalid data type (e.g., your Text region has a number or object, instead of a string).
- You have an unsupported value for
data-type. It must bespan,text, orblock.