Skip to main content

Story Text Editor Overview

Text Style, Formatting Options, Content Text Editor

Robert Lanckton avatar
Written by Robert Lanckton
Updated over a week ago

When creating the body of your Content in the Story editor, we offer have several options for formatting and styling, and inclusion of other types of media or content.

We utilize a widely-used text editor called Froala. It offers a modern HTML based text editor, designed for text creation that meets today's web standards. The tools available for text creation and formatting are listed below.

First Toolbar

By Default, In the first row of the toolbar, you will see the following icons:

Bold: Bold your text.

Italic: Italicize your text.

Underline: Underline your text.

Strikethrough: Strikethrough your text.

Subscript: Start typing below your regular text.

Superscript: Start typing above your regular text.

Font Family: Use the drop-down to select a font for your text. The default font for your Instance is configured as the Paragraph Type Scale in Content Controls.

Font Size: Change the size of your text.

Text Color: You can change your text color by either selecting one of the color options OR by entering a hex code for a more custom text color.

Background Color: You can add/change the highlight color of your text by either selecting one of the color options OR by entering a hex code for a more custom text color.

Line Height: Use this drop-down to select the line height of your text: Default, Single, 1.15, 1.25, 1.5, 1.75, or Double.

Type Scale Style: Use this drop-down to select the paragraph format: Paragraph, Heading 1 - 6. Note: To apply Styles, first click the Clear Formatting button before applying a Style.

Align: Use this drop-down to choose a text alignment: Left, Center, Right, Justify.

Ordered List: Use this drop-down to select a type of ordered list: Default, Lower Alpha, Lower Greek, Lower Roman, Upper Alpha, or Upper Roman.

Bulleted List: Use this drop-down to select a type of unordered bullet list: Default, Circle, Disc, Square.

Decrease Indent: Decrease the indent before your text.

Increase Indent: Increase the indent before your text.

Quote: Quote your text. You will have two options in the drop-down: Increase or Decrease.

Note: Resizing the browser Window may affect the order of icons.

Second Toolbar

In the second row of the toolbar, by default, you will see the following icons:

Insert Link: Enter a URL to hyperlink your text.

Insert Image: Insert an image from your computer or by entering a URL. If the file size is too big, you can resize the image or save as a different file type to reduce the size. After inserting an image, click the image for the option windows to appear.

  • Remove Image

  • Resize

  • Alignment

    • Left

    • Middle

    • Right

  • Image Caption

  • Display

    • Inline - Enables Wrap Text and Image positioning and resizing

    • Break Text

  • Insert Link

Insert Video: Insert a video using the video URL or embedding the code inside of the Story. Videos do not play inside a News Digest, but will play on the Story Page.

When using Embedded Code for Videos, we recommend selecting only the parts of the code which begin and end with <iframe>.

Embedded code should include dimensions for the <iframe>.
For Vimeo, choose "Customize" when sharing, then input a width of 600 Pixels.

Upload File: You can upload files from your computer for others to download from your Story. Files size is limited to 1 MB.

Insert Table: Insert a table into your Story by selecting the number of rows and columns you would like to have in your table. After your table is added, click into any cell to review Table formatting options:

  • Add Table Header

  • Add Table Footer

  • Remove Table (Delete All)

  • Row Options

    • Insert Row Above

    • Insert Row Below

    • Delete

  • Column Options

    • Insert Row Above

    • Insert Row Below

    • Delete

  • Cell Options

    • Merge (Select Multiple)

    • Vertical Split (Select One)

    • Horizontal Split (Select One)
      Cell Background

  • Vertical Align

    • Top

    • Middle

    • Bottom

  • Align (Text)

    • Left

    • Center

    • Right

    • Justify

Insert Horizontal Line: Use this to insert a horizontal line into your Story. This can help create some spacing in body text of you Content.

Select All: Use this to select everything inside of the Story Editor.

Clear Formatting: Use this to clear the formatting of selected text within the Story Editor. To avoid formatting errors, we recommend clearing the formatting of any text that you copy and paste into the editor.

Undo: Undo the last action you made in the Story Editor.

Redo: Redo the last undo you made in the Story Editor.


If you have any questions at all, please don't hesitate to reach out to us at support@cerkl.com or use the support Chat toward the bottom right-hand corner of any cerkl.com page.

Did this answer your question?