github.com/rpdict/ponzu@v0.10.1-0.20190226054626-477f29d6bf5e/docs/src/Form-Fields/HTML-Inputs.md (about) 1 title: HTML Input Elements for Ponzu Editor Forms 2 3 Ponzu provides a number of helpful HTML Inputs to create forms which CMS admins 4 use to manage content. The input functions are typically used inside a Content 5 type's `MarshalEditor()` func from within an `editor.Form()` - for example: 6 7 ```go 8 // MarshalEditor writes a buffer of html to edit a Post within the CMS 9 // and implements editor.Editable 10 func (p *Post) MarshalEditor() ([]byte, error) { 11 view, err := editor.Form(p, 12 editor.Field{ // <- editor.Fields contain input-like funcs 13 View: editor.Input("Title", p, map[string]string{ // <- makes a text input 14 "label": "Title", 15 "type": "text", 16 "placeholder": "Enter the Title here", 17 }), 18 }, 19 editor.Field{ 20 View: editor.Richtext("Body", p, map[string]string{ // <- makes a WYSIWIG editor 21 "label": "Body", 22 "placeholder": "Enter the Body here", 23 }), 24 }, 25 editor.Field{ 26 View: editor.Input("Author", p, map[string]string{ 27 "label": "Author", 28 "type": "text", 29 "placeholder": "Enter the Author here", 30 }), 31 }, 32 ) 33 34 if err != nil { 35 return nil, fmt.Errorf("Failed to render Post editor view: %s", err.Error()) 36 } 37 38 return view, nil 39 } 40 ``` 41 --- 42 43 ## Field Input Functions 44 45 There are many of these input-like HTML view funcs exported from Ponzu's 46 `management/editor` package. Below is a list of the built-in options: 47 48 ### `editor.Input` 49 The `editor.Input` function produces a standard text input. 50 51 ##### Screenshot 52 ![HTML Input](/images/editor-input.png) 53 54 ##### Function Signature 55 ```go 56 Input(fieldName string, p interface{}, attrs, options map[string]string) []byte 57 ``` 58 59 ##### Example 60 61 ```go 62 ... 63 editor.Field{ 64 View: editor.Input("Title", s, map[string]string{ 65 "label": "Title", 66 "type": "text", 67 "placeholder": "Enter the Title here", 68 }), 69 }, 70 ... 71 ``` 72 73 --- 74 75 ### `editor.InputRepeater` 76 The `editor.InputRepeater` function applies a controller UI to the `editor.Input` 77 view so any arbitrary number of inputs can be added for your field. 78 79 !!! warning "Using Repeaters" 80 When using the `editor.InputRepeater` make sure it's corresponding field is a **slice `[]T`** 81 type. You will experience errors if it is not. 82 83 ##### Screenshot 84 ![HTML Input](/images/editor-input-repeater.png) 85 86 ##### Function Signature 87 ```go 88 InputRepeater(fieldName string, p interface{}, attrs, options map[string]string) []byte 89 ``` 90 91 ##### Example 92 93 ```go 94 ... 95 editor.Field{ 96 View: editor.InputRepeater("Title", s, map[string]string{ 97 "label": "Titles", 98 "type": "text", 99 "placeholder": "Enter the Title here", 100 }), 101 }, 102 ... 103 ``` 104 105 --- 106 107 ### `editor.Checkbox` 108 The `editor.Checkbox` function returns any number of checkboxes in a collection, 109 defined by the value:name map of options. 110 111 ##### Screenshot 112 ![HTML Checkbox](/images/editor-checkbox.png) 113 114 ##### Function Signature 115 ```go 116 Checkbox(fieldName string, p interface{}, attrs, options map[string]string) []byte 117 ``` 118 119 ##### Example 120 121 ```go 122 ... 123 editor.Field{ 124 View: editor.Checkbox("Options", s, map[string]string{ 125 "label": "Options", 126 }, map[string]string{ 127 // "value": "Display Name", 128 "1": "First", 129 "2": "Second", 130 "3": "Third", 131 }), 132 }, 133 ... 134 ``` 135 136 --- 137 138 ### `editor.Richtext` 139 The `editor.Richetext` function displays an HTML5 rich text / WYSYWIG editor which 140 supports text formatting and styling, images, quotes, arbitrary HTML, and more. 141 142 The rich text editor is a modified version of [Summernote](http://summernote.org/) 143 using a theme called [MaterialNote](https://github.com/Cerealkillerway/materialNote) 144 145 ##### Screenshot 146 ![HTML Richtext Input](/images/editor-richtext.png) 147 148 ##### Function Signature 149 ```go 150 Richtext(fieldName string, p interface{}, attrs map[string]string) []byte 151 ``` 152 153 ##### Example 154 ```go 155 ... 156 editor.Field{ 157 View: editor.Richtext("Opinion", s, map[string]string{ 158 "label": "Rich Text Editor", 159 "placeholder": "Enter the Opinion here", 160 }), 161 }, 162 ... 163 ``` 164 165 --- 166 167 ### `editor.Tags` 168 The `editor.Tags` function returns a container input element for lists of arbitrary 169 bits of information. 170 171 ##### Screenshot 172 ![HTML Tags Input](/images/editor-tags.png) 173 174 ##### Function Signature 175 ```go 176 Tags(fieldName string, p interface{}, attrs map[string]string) []byte 177 ``` 178 179 ##### Example 180 ```go 181 ... 182 editor.Field{ 183 View: editor.Tags("Category", s, map[string]string{ 184 "label": "Tags", 185 "placeholder": "+Category", 186 }), 187 }, 188 ... 189 ``` 190 191 --- 192 193 ### `editor.File` 194 The `editor.File` function returns an HTML file upload element, which saves files 195 into the `/uploads` directory, and can be viewed from the "Uploads" section in the 196 Admin dashboard. See also the [File Metadata API](/HTTP-APIs/File-Metadata.md). 197 198 !!! warning "Field Type" 199 When using the `editor.File` function, its corresponding field type must be 200 a **`string`**, as files will be stored as URL paths in the database. 201 202 ##### Screenshot 203 ![HTML File Input](/images/editor-file.png) 204 205 ##### Function Signature 206 ```go 207 File(fieldName string, p interface{}, attrs map[string]string) []byte 208 ``` 209 210 ##### Example 211 ```go 212 ... 213 editor.Field{ 214 View: editor.File("Photo", s, map[string]string{ 215 "label": "File Upload", 216 "placeholder": "Upload the Photo here", 217 }), 218 }, 219 ... 220 ``` 221 222 --- 223 224 ### `editor.FileRepeater` 225 The `editor.FileRepeater` function applies a controller UI to the `editor.File` 226 view so any arbitrary number of uploads can be added for your field. 227 228 !!! warning "Using Repeaters" 229 When using the `editor.FileRepeater` make sure it's corresponding field is a **slice `[]string`** 230 type. You will experience errors if it is not. 231 232 ##### Screenshot 233 ![HTML File Input](/images/editor-file-repeater.png) 234 235 ##### Function Signature 236 ```go 237 FileRepeater(fieldName string, p interface{}, attrs map[string]string) []byte 238 ``` 239 240 ##### Example 241 ```go 242 ... 243 editor.Field{ 244 View: editor.FileRepeater("Photo", s, map[string]string{ 245 "label": "File Upload Repeater", 246 "placeholder": "Upload the Photo here", 247 }), 248 }, 249 ... 250 ``` 251 252 --- 253 254 ### `editor.Select` 255 The `editor.Select` function returns a single HTML select input with options 256 as defined in the `options map[string]string` parameter of the function call. 257 258 ##### Screenshot 259 ![HTML Select Input](/images/editor-select.png) 260 261 ##### Function Signature 262 ```go 263 func Select(fieldName string, p interface{}, attrs, options map[string]string) []byte 264 ``` 265 266 ##### Example 267 ```go 268 ... 269 editor.Field{ 270 View: editor.Select("Rating", s, map[string]string{ 271 "label": "Select Dropdown", 272 }, map[string]string{ 273 // "value": "Display Name", 274 "G": "G", 275 "PG": "PG", 276 "PG-13": "PG-13", 277 "R": "R", 278 }), 279 }, 280 ... 281 ``` 282 283 --- 284 285 ### `editor.SelectRepeater` 286 The `editor.SelectRepeater` function applies a controller UI to the `editor.Select` 287 view so any arbitrary number of dropdowns can be added for your field. 288 289 ##### Screenshot 290 ![HTML Select Input](/images/editor-select-repeater.png) 291 292 ##### Function Signature 293 ```go 294 func SelectRepeater(fieldName string, p interface{}, attrs, options map[string]string) []byte 295 ``` 296 297 ##### Example 298 ```go 299 ... 300 editor.Field{ 301 View: editor.SelectRepeater("Rating", s, map[string]string{ 302 "label": "Select Dropdown Repeater", 303 }, map[string]string{ 304 // "value": "Display Name", 305 "G": "G", 306 "PG": "PG", 307 "PG-13": "PG-13", 308 "R": "R", 309 }), 310 }, 311 ... 312 ``` 313 314 --- 315 316 ### `editor.Textarea` 317 The `editor.Textarea` function returns an HTML textarea input to add unstyled text 318 blocks. Newlines in the textarea are preserved. 319 320 ##### Screenshot 321 ![HTML Textarea Input](/images/editor-textarea.png) 322 323 ##### Function Signature 324 ```go 325 Textarea(fieldName string, p interface{}, attrs map[string]string) []byte 326 ``` 327 328 ##### Example 329 ```go 330 ... 331 editor.Field{ 332 View: editor.Textarea("Readme", s, map[string]string{ 333 "label": "Textarea", 334 "placeholder": "Enter the Readme here", 335 }), 336 }, 337 ... 338 ``` 339 340 --- 341 342 ## Data References 343 It is common to want to keep a reference from one Content type to another. To do 344 this in Ponzu, use the [`bosssauce/reference`](https://github.com/bosssauce/reference) 345 package. It comes pre-installed with Ponzu as an ["Addon"](/Ponzu-Addons/Using-Addons). 346 347 ### `reference.Select` 348 349 ##### Screenshot 350 ![HTML Select Input](/images/editor-select.png) 351 352 ##### Function Signature 353 ```go 354 func Select(fieldName string, p interface{}, attrs map[string]string, contentType, tmplString string) []byte 355 ``` 356 357 ##### Example 358 ```go 359 ... 360 editor.Field{ 361 View: reference.Select("DirectedBy", s, map[string]string{ 362 "label": "Select Dropdown", 363 }, "Director", `{{.last-name}}, {{.first_name}}`), 364 }, 365 ... 366 ``` 367 368 --- 369 370 ### `reference.SelectRepeater` 371 372 ##### Screenshot 373 ![HTML Select Input](/images/editor-select-repeater.png) 374 375 ##### Function Signature 376 ```go 377 func SelectRepeater(fieldName string, p interface{}, attrs map[string]string, contentType, tmplString string) []byte 378 ``` 379 380 ##### Example 381 ```go 382 ... 383 editor.Field{ 384 View: reference.SelectRepeater("PlacesFilmed", s, map[string]string{ 385 "label": "Select Dropdown Repeater", 386 }, "Location", `{{.name}}, {{.region}}`), 387 }, 388 ... 389 ``` 390 391 ---