Configure Text Editable Regions

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, data files, or the content of your files, with plain text or rich text formatting options.

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:

1. Identify the file to which you want to add a Text Editable Region. We recommend any layout files that contain templating that is populated by content files at build time.
2. Open the file in CloudCannon's Source Editor or your local development environment.
3. 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.
4. Add the data-prop="" HTML attribute to the same DOM element, or to the <editable-text> web component. The value of data-prop should be the path to the data property you want to edit.
5. Save your changes and rebuild your Site.

When you open the file in the Visual Editor, CloudCannon will show a yellow Editable Region box 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.

Examples#

Here are a few examples of different Text Editable Regions:

<h1 data-editable="text" data-prop="title" >{title}</h1> 

<p>By: <editable-text data-prop="author">{author}</editable-text></p> 

<editable-text data-prop="@content"> 
    <slot />
</editable-text>

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 on 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.

flowchart TD
  Start([  Editable Region  ])
  Q1{Is data-type<br/>defined?}
  Defined([&nbsp;&nbsp;Use data-type&nbsp;&nbsp;])
  Q2{Content or<br/>front matter?}
  Q2a{Support<br/>block-level?}
  RblockA([&nbsp;&nbsp;data-type = block&nbsp;&nbsp;])
  RtextA([&nbsp;&nbsp;data-type = text&nbsp;&nbsp;])
  Q3{Is input type<br/>configured?}
  RspanA([&nbsp;&nbsp;data-type = span&nbsp;&nbsp;])
  Q4{Which<br/>input type?}
  RspanB([&nbsp;&nbsp;data-type = span&nbsp;&nbsp;])
  Q4a{Support<br/>block-level?}
  RblockB([&nbsp;&nbsp;data-type = block&nbsp;&nbsp;])
  RtextB([&nbsp;&nbsp;data-type = text&nbsp;&nbsp;])
  Start --> Q1
  Q1 -->|Yes| Defined
  Q1 -->|No| Q2
  Q2 -->|Content| Q2a
  Q2a -->|Yes| RblockA
  Q2a -->|No| RtextA
  Q2 -->|Front matter| Q3
  Q3 -->|No| RspanA
  Q3 -->|Yes| Q4
  Q4 -->|Other| RspanB
  Q4 -->|markdown or html| Q4a
  Q4a -->|Yes| RblockB
  Q4a -->|No| RtextB

Rich text styles#

Text Editable Regions with data-type="text" or data-type="block" support Rich Text styles, letting your team apply your own CSS classes to selected text from the WYSIWYG toolbar.

Define your styles with the styles option under _editables.text in your CloudCannon Configuration File, or under _inputs.*.options.styles for a Rich Text Input. The value is the path to a CSS file containing the classes you want to make available.

_editables:
  text:
    styles: /css/editor-styles.css

{
  "_editables": {
    "text": {
      "styles": "/css/editor-styles.css"
    }
  }
}

Misconfigured Text Editable Regions#

If your Text Editable Region is misconfigured, CloudCannon will replace it in the Visual Editor with a red Error Card headed Failed to render text editable region, followed by a message describing the problem.

Text Editable Regions are misconfigured if:

• You did not define the data-prop HTML 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 be span, text, or block.