Geckos Documentation

This is an old revision of the document!

---

====== Rich Text fields ====== **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. <code javascript> "fields": [ { "name": "myfieldname", "label":"My field", "default": "Default value", "type": "richtext" } ] </code> ===== Snippets ====== Since completion of [[https://github.com/Gulix/geckos/issues/189|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 : <code javascript> "fields": [ { "name": "details", "label": "Détails", "type": "richtext", "snippets": [ { "name": "btnBullet", "icon": "bullet.png", "value": "❍", "tooltip": "Bullet" } ] } ] </code> 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''. ===== Using the variables ===== 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 variables|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). <code javascript> "canvasFields": [ { "type": "textbox", "text": "$myfieldname$", "styles": "£myfieldname" } ] </code>