Skip to content

Commit 03b8b39

Browse files
committed
docs about rich text templates
1 parent fccc0d8 commit 03b8b39

File tree

1 file changed

+34
-1
lines changed

1 file changed

+34
-1
lines changed

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -448,4 +448,37 @@ To format your date fields to display the elapsed time, you can utilize the Rela
448448
//diff-add
449449
},
450450
...
451-
```
451+
```
452+
453+
### Rich text and Zero-style Rich text
454+
455+
If you have some field which holds HTML content you can use `RichText` renderer to render it as HTML.
456+
457+
```ts title='./resources/anyResource.ts'
458+
columns: [
459+
...
460+
{
461+
name: 'content',
462+
//diff-add
463+
components: {
464+
//diff-add
465+
list: '@/renderers/RichText.vue'
466+
//diff-add
467+
},
468+
...
469+
}
470+
]
471+
```
472+
473+
The renderer will render the HTML content and protect against XSS attacks.
474+
If HTML in field has some tags or classes which covered by adminforth internal styles (including Tailwind classes), they will be styled (text/p styles etc). If this is an issue for your task and you need full raw preview of the HTML, you can use `ZeroStyleRichText` renderer:
475+
476+
```ts title='./resources/anyResource.ts'
477+
//diff-remove
478+
list: '@/renderers/RichText.vue',
479+
//diff-add
480+
list: '@/renderers/ZeroStylesRichText.vue',
481+
//diff-add
482+
```
483+
484+
`ZeroStyleRichText` fits well for tasks like email templates preview fields.

0 commit comments

Comments
 (0)