Skip to content

Rich Text Editor and Variables

The Hyvä CMS rich text editor is the inline WYSIWYG editor used by every richtext field. It is built on TipTap (a ProseMirror editor) and lets merchants format copy, add links, insert images and widgets, and drop in dynamic Magento variables, all without leaving the Liveview Editor preview.

Available since Hyvä CMS 1.2.0

The TipTap-based rich text editor was introduced in Hyvä CMS 1.2.0, replacing the earlier Quill-based editor. If you are upgrading from an older version, your existing rich text content keeps working: stored HTML is reparsed into the new editor on load.

Rich text editor toolbar in the Liveview Editor

Formatting Content

The rich text toolbar gives content editors the everyday formatting controls:

  • Bold, italic, underline, and strikethrough
  • Headings (H1, H2, H3)
  • Bullet and ordered lists
  • Blockquote and code block
  • Undo and redo within the field

Click into any rich text field in the preview to start editing inline. Changes stream into the preview as you type, so what you see is what gets published.

Expand for a bigger writing surface

Long-form copy is easier to write in the larger modal. Use the Expand button in the toolbar to open the full-screen rich text editor, then Save to return your changes to the field.

The rich text toolbar reuses the same pickers as the rest of the editor, so links, images, and widgets behave consistently everywhere:

  • Link opens the link handler, where you can link to a CMS page, category, product, custom URL, or other Magento entity.
  • Image opens the media gallery to choose and insert an image.
  • Widget opens the Magento widget picker to embed a widget inline.

Inserted links, images, and widgets appear as styled "chips" in the editor rather than raw markup. Each chip has a pencil button so editors can reopen its builder and adjust it later.

Inserting Variables and Directives

The Insert Variable toolbar button opens a picker for dropping dynamic Magento values into rich text. These values resolve when the content renders on the storefront, so a single piece of content can show store-specific details, translated strings, or generated URLs.

The picker has two tabs.

Store and Custom Variables

The Store & Custom Variables tab lists a curated, searchable set of variables sourced directly from Magento's own variable system, the same data set Magento uses for its WYSIWYG "Insert Variable" feature:

  • Store contact information inserts a {{config path="..."}} directive, for example the store name or store email.
  • Admin-defined custom variables insert a {{customVar code="..."}} directive.

Custom variables are managed in Magento under Content > Custom Variables. If no variables are available, the tab points editors there.

Why config variables are curated, not free-form

Only the curated list can emit {{config path="..."}} directives. Free-form config paths are intentionally not offered, because arbitrary store-config access from content is a security risk. To expose a new store value, add it as a Magento custom variable.

Custom Directive

The Custom Directive tab provides guided builders for three Magento directives, each with a live preview of the directive string before you insert it:

  • Variable builds {{var ...}}, for example {{var customer.name}}
  • Translation builds {{trans "..."}}, for example {{trans "Thank you for your order"}}
  • Store URL builds {{store url="..."}} or {{store direct_url="..."}}

Like links and images, inserted variables show as editable chips. Select a chip's edit button to reopen its builder.

Hyvä CMS adds two extra directives, {{hyva_image}} and {{hyva_link}}, for cases where an image or link needs to live inside a rich text field rather than in a dedicated component field. They are inserted through the same Image and Link pickers and render to clean HTML on the storefront.

{{hyva_image src="path/to/image.jpg" alt="Alt text" width="640" height="480" /}}
{{hyva_link type="cms_page" value="about-us" label="About Us" target="_blank" /}}

The {{hyva_link}} directive is store-aware: it resolves category, product, CMS page, and custom URL link types to the correct storefront URL, exactly like the standard link field. The {{hyva_image}} directive resolves a media path to a full image URL.

For Developers

The richtext field type renders through Hyva\CmsLiveviewEditor\Block\Element::renderRichText(); see renderRichText in Component Templates for how directive processing order works.

There is no dedicated "prose" toggle on rich text fields. To apply Tailwind Typography styling, add the prose class through the component's Advanced > CSS Classes field, or pre-populate it with default component classes so editors do not have to add it manually.

Developers can register additional TipTap editor extensions; see Extending the Rich Text Editor.

No dedicated configuration or ACL

The rich text editor and the variables feature have no dedicated system configuration or ACL resource. Access follows standard Liveview Editor admin access. The curated variable list inherits from Magento's native Custom Variables and store contact configuration.