Documents |

Widget inside text

Table of Content

Articles, products, and other dynamic entities frequently contain text fields. A single text field often constitutes the body of an article, for example. Even though text fields are capable of many things, they are rather limited when it comes to including things such as image galleries or two columns of content. Content Management Systems (CMSs) often get around this issue by:

  1. Allow the users to paste HTML code directly into these text fields.

  2. Add pre-styled blocks that can be used to style content.

The first option is convenient, but not very user-friendly since it requires knowledge of HTML and CSS, and it can be dangerous for people who don't know what they're doing. The second option is better, but we must add a list of pre-styled blocks, limiting our creativity.

Text's widgets/shortcuts

content editor - shortcut - Nilead platform

Nilead CMS solves the above issue by taking the 2nd option with a tweak:

  1. The blocks/widgets can be styled as usual using the powerful Visual Editor.

  2. Those blocks/widgets can be injected into the text area at any position and can be configured to customize the content accordingly.

We call these specialized blocks/widgets shortcuts for now (just a convenient name we came up with to distinguish them from other types of widgets). Just a few minor differences separate shortcuts from other widgets:

  1. You must include these shortcuts directly inside rich-text widgets (they should be direct children of rich-text widgets).

  2. Styles, effects, etc... can be applied to these shortcuts and their children as usual.

NOTE: In general, shortcuts should be used only for text widgets displaying dynamic content (such as an article's content).  Static content can be easily styled using the Visual Editor, so shortcuts are not necessary.

Create a new shortcut

A shortcut must be created within a richtext element.

  1. Identify which richtext element you want to add the shortcut to.

  2. Select the Configurable Transparent provider from the element panel and add it to that richtext element.

  3. Use the contextual menu to make the newly added Configurable Transparent provider a Shortcut.

  4. Add anything you want to the Configurable Transparent provider and style it accordingly.

  5. Make sure to check the `Optimize` option configuration of the richtext element.

A Configurable Transparent provider serves as an intermediary for data transmission. In this specific case, it can be used to allow you to configure your data right within the richtext area. It will be easier to explain by reading the following tutorials:

  1. Add a nice styled Note shortcut for your articles.

  2. Add a beautiful gallery shortcut for your articles.

NOTE: Data mapping works as usual inside your shortcut(s). Data can be mapped directly from the global context or from your Configurable Transparent provider. Whenever possible, you should map data directly from the global context, leaving minimal configurable data inputs for the shortcut.

You can add more than one shortcut to your richtext element. Feel free to add as many as you want. It should be noted that these shortcuts will not be rendered unless they are included within text. A shortcut is simply a `template` and can be included more than once within your text.

Use your shortcuts

We have added a new widget/shortcut icon to the richtext's editor. When you click on this icon, a shortcut's placeholder will be added to your text. You can then:

  1. Select the shortcut you want to use.

  2. Configure the shortcut accordingly.

content editor - edit shortcut - Nilead platform

It's very important to note that:

  1. The shortcut you want to use must be available inside the richtext widget element that prints out this text. Otherwise, the shortcut will be ignored and will not be printed out.

  2. If you delete or disable the shortcut via the Visual Editor, the shortcuts you already included in your text will be ignored and will not be printed out.

visual editor - shortcut structure - Nilead platform

Current limitation

  1. You need to know which shortcuts you can use for your text (which shortcuts are already added to the richtext widget). Currently, when you include the shortcut from any text field you can select ALL shortcuts available globally. If the shortcut you select is not already included within the richtext element that prints out your text field then the shortcut section will simply be ignored and not printed out.

  2. You need to remove the shortcuts you include within your text manually after you removed the shortcuts from richtext elements. You can also leave them there but they will simply be ignored and not printed out.

  3. If you are working on an article via the CMS, you can only preview how the included shortcuts are printed out by using the preview feature.


DIscord chat

We're available Monday–Friday, security and critical bug fixes are available 24/7.

Facebook page

Get the latest news and updates regarding Nilead platform and services.