You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 15/umbraco-cms/reference/umbraco-flavored-markdown.md
+10-11Lines changed: 10 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -43,9 +43,9 @@ The internal working of the `ufm-label-value` component would then be able to ac
43
43
44
44
In addition, a filter syntax can be applied to UFM contents. This can be useful for formatting or transforming a value without needing to develop your own custom UFM component.
45
45
46
-
The syntax for UFM filters by using a pipe character `|` (U+007C Vertical Line). Multiple filters may be applied. The value from the previous filter is passed onto the next.
46
+
The syntax for UFM filters uses a pipe character `|` (U+007C Vertical Line). Multiple filters may be applied, and the value from the previous filter is passed onto the next.
47
47
48
-
For example, to display a rich text value, stripping out the HTML markup and limiting it to the first 15 words could use the following filters:
48
+
To display a rich text value, stripping out the HTML markup and limiting it to the first 15 words could use the following filters:
49
49
50
50
```markdown
51
51
{umbValue: bodyText | strip-html | word-limit:15}
@@ -58,7 +58,7 @@ A list of available UFM filters is detailed below.
58
58
59
59
### Available UFM components
60
60
61
-
As of Umbraco 15.0.0, the following UFM components are available to use.
61
+
The following UFM components are available to use.
62
62
63
63
- Label Value
64
64
- Localize
@@ -73,7 +73,7 @@ The Label Value component will render the current value of a given property alia
73
73
74
74
The alias prefix is `umbValue`. An example of the syntax is `{umbValue: bodyText}`, which would render the component as `<ufm-label-value alias="bodyText"></ufm-label-value>`.
75
75
76
-
For brevity and backwards-compatibility (with Umbraco 14.1.0), the `=` marker prefix can be used, e.g. `{=bodyText}`.
76
+
For brevity and backwards-compatibility, the `=` marker prefix can be used, e.g. `{=bodyText}`.
77
77
78
78
79
79
#### Localize
@@ -82,7 +82,7 @@ The Localize component will render a localization for a given term key.
82
82
83
83
The alias prefix is `umbLocalize`. An example of the syntax is `{umbLocalize: general_name}`, which would render the component as `<ufm-localize alias="general_name"></ufm-localize>`.
84
84
85
-
Similarly, for brevity and backwards-compatibility (with Umbraco 14.1.0), the `#` marker prefix can be used, e.g. `{#general_name}`.
85
+
Similarly, for brevity and backwards-compatibility, the `#` marker prefix can be used, e.g. `{#general_name}`.
86
86
87
87
88
88
#### Content Name
@@ -96,7 +96,7 @@ As of Umbraco 15.0.0, the Content Name component supports the content-based pick
96
96
97
97
### Available UFM filters
98
98
99
-
As of Umbraco 15.0.0, the following UFM filters are available to use.
| Word Limit |`word-limit`| `{umbValue: intro | word-limit:15}` |
109
109
110
-
More UFM filters may be available in upcoming Umbraco releases.
111
110
112
111
113
112
### Custom UFM components
@@ -141,12 +140,12 @@ export class MyCustomUfmComponentApi implements UmbUfmComponentBase {
141
140
export { MyCustomUfmComponentApiasapi };
142
141
```
143
142
144
-
Using the syntax `{myCustom: myCustomText}` would render the markup `<ufm-custom-component text="myCustomText"></ufm-custom-component>`. Then inside the `ufm-custom-component` component code, you can perform any logic to render your required markup.
143
+
Using the `{myCustom: myCustomText}`syntax would render the following markup:`<ufm-custom-component text="myCustomText"></ufm-custom-component>`. Inside the `ufm-custom-component` component code, you can perform any logic to render your required markup.
145
144
146
145
147
146
### Custom UFM filters
148
147
149
-
If you wish to develop your own custom UFM filter, you can use the `ufmFilter` extension type:
148
+
If you wish to develop custom UFM filter, you can use the `ufmFilter` extension type:
150
149
151
150
```json
152
151
{
@@ -174,7 +173,7 @@ class UmbUfmReverseFilterApi extends UmbUfmFilterBase {
174
173
export { UmbUfmReverseFilterApiasapi };
175
174
```
176
175
177
-
Using the syntax `{umbValue: headline | reverse}`, e.g. where `headline` having a value of `Hello world` would be transform to `dlrow olleH`.
176
+
Using the `{umbValue: headline | reverse}` syntax where `headline` having a value of `Hello world` would be transformed to `dlrow olleH`.
178
177
179
178
180
179
## Post-processing and sanitization
@@ -190,7 +189,7 @@ The sanitized markup will be...
190
189
- Only web components that have a prefix of `ufm-`, `umb-` or `uui-` will be allowed to render
191
190
192
191
193
-
## Rendering UFM in your own components
192
+
## Rendering UFM in custom components
194
193
195
194
If you would like to render UFM within your own web components in the Umbraco CMS backoffice, you can use the `umb-ufm-render` component:
0 commit comments