Rich Text

A data component, the Rich Text component is a way to create one-off text blocks using a WYSIWYG editor, without employing HTML, CSS, or Javascript. It’s even possible to bring model data into the text blocks using merge syntax.

Should I use the Rich Text or the Template component? [[]]

Use the Rich Text component if:

  • You are not comfortable using HTML and CSS.

  • The styling and/or contents will not be repeated elsewhere on the page.

  • The styling and/or contents do not require modification via CSS or JavaScript.

    Note

    Styles within a Rich Text component must be edited manually, one editor at a time. If you have a repeating block of text (for example, orange labels on multiple parts of a page) that must be modified at some later date (converted to green labels), you would have to make modifications in each individual component.

    In a case like this, it would be better to use a Template and CSS classes.

Otherwise, use a Template component.

Using the Rich Text Component

Using the Rich Text component is pretty easy:

  • Drag and drop the component into the page.
  • Click the editor area within the component and begin composing and formatting text. Use standard text editor options, including font styling, bullets, numbering, adding links, images, tables, and much more).

Seriously. That’s all there is to it.

Note

Custom fonts that have been added to a Skuid page’s theme are also available for use within the Rich Text component.

Note

The Rich Text component uses CKEditor. Learn more about this editor at http://ckeditor.com/.

Using the Rich Text component with merge syntax

To include merge syntax in the Rich Text component—for example, to reference a particular field—connect to the model by selecting it in the Model property within the Properties pane.

Note

Consider how data will be represented when the Do Not Run Template on Each Row checkbox is checked. For more information, see the Properties section below.

Now the Rich text component will include an Insert Field(s) button that lets you insert fields from the model into the component.

Properties

Rich Text Properties

Basic tab [[]]

  • Model:

    • None: Select this to use the component without template capabilities.
    • [Specific models]: All models within the page will be listed as options. To include model template capabilities in the Rich Text component—for example, to reference a particular field—select a model.
  • Do Not Run Template on Each Row: Not to be confused with the Template component., this property determines whether or not a Rich Text component’s content should be used as a template—a repeated structure—for each record in a model.

    • If not checked (the default): The Rich Text content will display for each record in the model—representing each record as another row of rich text.

      Each row of rich text correlates to an individual record in the model, and merge variables within each rich text row display data for the corresponding record.

      (If there is only one record in the model. only one item will display. If there are dozens of records, dozens of rows will display.)

    • If checked: The Rich Text content will only display once, for a single row on the model. Merge variables will only display if context is provided. (If there is no context for the merge syntax, no content will be displayed for the merge variables.) Best used if you are referencing a field that appears only once on the model.

Advanced tab [[]]

Rendering tab [[]]

Conditional rendering allows you to display or hide the deck, based on defined data conditions.