Rich Text fields are text input fields with control on the text's style. It creates a text input in which the user can type anything he wants, and format the text in bold and/or italic. This text can then be passed to the card to be displayed.

"fields": [
    { "name": "myfieldname", "label":"My field", "default": "Default value", "type": "richtext" } 
]

Since completion of Issue #189, the Rich Text Field can have snippets. Those are chunks of text that are added via a click on a button. It can be useful when you have special characters from the ASCII table (Bullets, Cards Suit, …), or when your card is often used with similar bits of text (default profiles, description, …).

To add one or more snippets to a Rich Text Field, follow this code :

"fields": [
    {
        "name": "details",
        "label": "Détails",
        "type": "richtext",
        "snippets": [
            { "name": "btnBullet", "icon": "bullet.png", "value": "❍", "tooltip": "Bullet" }            
        ]
    }
]

The name here is the name of the button that will be created. The icon is the PNG file that will be used on the button. It should be placed in the src/js/templates folder. You can use standard URL value from that point (upper directory, child directory, …). The tooltip value is what is displayed on the UI when the button is hovered.

The value is the string that will be inserted in the Rich Text Field when the button is clicked. It can be HTML value, such as <em>This is Italic text</em> <strong>This is bold text</strong> This is standard text.

Since completion of Issue #194, the Rich Text Field can have text in different colors. You can let the user choose any RGB color for his text, or limit the experience to a pre-defined list of colors.

To add text color to a Rich Text Field, follow this code :

"fields": [
    {
        "name": "details",
        "label": "Détails",
        "type": "richtext",
        "colored": true,
        "colors": [ "red", "#FF5566", "rgb(127, 18, 255)" ]
    }
]

To activate the display of the color button, you just have to add the property colored with a true value. The user will be then able to set any color to the text.

If you want to limit the available colors, you need to add the colors array, with a list of string that matches the colors you want. You can add any HTML colors in the format you want, like in the example. See the TinyColor demo to try out the various formats.

With each Rich Text field created, some variables are created.

You can get the generated html value of the field by setting a property to the string $myfieldname. This should not come to any use.

A much more needed use is the possibility to get the raw text, without any formatting. For this case, use the Advanced string variable $myfieldname$ in the property you need.

But, how to get the formatting ? For this, you'll have to set the text property of a text canvas field (text, textbox, i-text) to the advanced string variable $myfieldname$, and the styles property to £myfieldname. It's important to not add text before the advanced string variable, because the styling is set to match the index of a character in a line (and adding characters modifies index for other characters).

"canvasFields": [
  { "type": "textbox", "text": "$myfieldname$", "styles": "£myfieldname" }
]