Differences

This shows you the differences between two versions of the page.

--- en:template:rich_text_field [2016/08/11 10:35]
Nicolas Ronvel
+++ en:template:rich_text_field [2017/09/14 11:32] (current)
Nicolas Ronvel [Snippets]
@@ Line 9: / Line 9: @@
 </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''.
+===== Colors ======
+Since completion of [[https://github.com/Gulix/geckos/issues/194|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 :
+<code javascript>
+"fields": [
+    {
+        "name": "details",
+        "label": "Détails",
+        "type": "richtext",
+        "colored": true,
+        "colors": [ "red", "#FF5566", "rgb(127, 18, 255)" ]
+    }
+]
+</code>
+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 [[http://bgrins.github.io/TinyColor/|TinyColor demo]] to try out the various formats.
 ===== Using the variables =====

Geckos Documentation

User Tools

Site Tools

Differences

Page Tools