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
The rich text editor control provides the app user a WYSIWYG editing area for formatting text. The control's input and output format is HTML. The control allows copied rich text, such as from web browser or Word, to be pasted into the control.
25
+
The rich text editor control provides the app user a WYSIWYG editing area for formatting text. The control's input and output format is HTML. The control allows copied rich text, such as from a web browser or Word, to be pasted into the control.
26
+
27
+
Some of the format options available are:
26
28
27
-
Some of the format options available:
28
29
- Bold, italic, underline, and strikethrough.
29
30
- Text color, highlight color.
30
31
- Font type and size.
31
-
- Numbered lists, bulleted lists.
32
+
- Numbered lists and bulleted lists.
32
33
- Hyperlinks.
33
34
- Tables.
34
35
35
36
<imgsrc="media/rich-text-control.png"alt="Rich text control editor in a model-driven app"height="500"width="520">
36
37
37
38
## Add or replace a text field for rich text editing
38
39
39
-
You can create a new text field and configure the control or replace an existing text field. The rich text editor control can be used with single or multi-line text fields.
40
+
You can create a new text field and configure the control, or replace an existing text field. The rich text editor control can be used with single or multi-line text fields.
40
41
41
42
1. Sign in to Power Apps. Go to **Solutions**, open the solution that you want, open the entity that you want, and then select the **Forms** tab.
42
43
2. Select the form, and then select **Edit form**.
43
-
3. In the form designer, select **Switch to classic** on the command bar.
44
-
4. On the legacy form designer canvas, add or create a text field or select an existing text field, such as the account entity **Description** field. Select **Change Properties**on the**Home** tab.
44
+
3. In the form designer on the command bar, select **Switch to classic**.
45
+
4. On the legacy form designer canvas, add or create a text field or select an existing text field, such as the account entity **Description** field. On the **Home**tab, select**Change Properties**.
45
46
5. On the **Field Properties** page, select the **Controls** tab, and then select **Add control**.
46
47
6. Select **Rich Text Editor Control**, and then select **Add**.
47
-
7. Select **Web**, **Phone**, and **Tablet** if you want all client apps to have the ability to use rich text in the field. Then, select **OK** to use the default rich text editor control configuration. If you want to change the rich text editor control configuration, see [Rich text editor control configuration options](#rich-text-editor-control-configuration-options).
48
+
7. Select **Web**, **Phone**, and **Tablet** if you want all client apps to have the ability to use rich text in the field. Then select **OK** to use the default rich text editor control configuration. If you want to change the rich text editor control configuration, see [Rich text editor control configuration options](#rich-text-editor-control-configuration-options).
48
49
49
50
<imgsrc="media/rich-text-control2.png"alt="Rich text control editor configuration"height="497"width="485">
50
51
8. Save and then publish the form.
51
52
52
53
## Rich text editor control configuration options
53
54
54
-
The rich text editor control comes with a rich set of configuration options that make it possible to customize its appearance, features, and behavior. To configure the rich text editor control, follow these steps:
55
+
The rich text editor control comes with a rich set of configuration options that make it possible to customize its appearance, features, and behavior. To configure the rich text editor control, follow these steps:
56
+
55
57
1. Create a JSON file that includes the defaultSupportedProps structure and [configuration](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html) with the changes you want. More information: [Rich text editor properties](#rich-text-editor-properties)
56
58
2. In Power Apps, create a JavaScript web resource using the JSON file created in step 1. More information: [Create or edit model-driven app web resources to extend an app](create-edit-web-resources.md)
57
59
3. Open the **Field Properties** page for the text field with the rich text editor control, and then next to **RichTextEditorControl_URL** select **Edit**.
58
60
> [!div class="mx-imgBorder"]
59
-
> 
61
+
> 
60
62
4. Select **Bind to static value**, enter the relative URL to the JavaScript web resource in the box next to **SingleLine.___URL**, and then select **OK**. The relative URL is located on the web resource definition.
61
63
5. Select **OK** to close the **Field Properties** page.
62
64
6. On the form editor command bar, select **Publish**.
@@ -70,17 +72,17 @@ You can configure all the ckEditor supported properties under this property. A f
70
72
71
73
|Attribute |Description |
72
74
|---------|---------|
73
-
|height | Sets the height of the content editor. Default is 185px. |
74
-
|font_defaultLabel | Sets the default font style. Default is Segoe UI. |
75
-
|fontSize_defaultLabel | Sets the default font size. Default is 14. |
75
+
|height | Sets the height of the content editor. The default is 185 px. |
76
+
|font_defaultLabel | Sets the default font style. The default is Segoe UI. |
77
+
|fontSize_defaultLabel | Sets the default font size. The default is 14. |
76
78
|toolbarLocation | The ___location of the user interface where the toolbar will be rendered. Supported values are *top* and *bottom*. Default is bottom. |
77
-
|plugins | Comma-separated list of plugins to be used in an editor instance. Note that the actual plugins that are loaded might still be affected by two other settings: *extraPlugins* and *removePlugins*. <br /> Updating this setting might remove the plugins from the toolbar. If you set this property to an empty string, then the editor will load without the toolbar. <br /> If you want to add one or more plugins to the toolbar, we recommend that you use *extraPlugins*. If you want to remove one or more from default list, use *removePlugins*. |
78
-
|extraPlugins | A coma separated list of additional plugins to be loaded. This setting makes it easier to add new plugins without touching the plugins setting. <br /> There are a many plugins that are required for other plugins to work. For example, the dialog plugin is required for the link plugin. The rich text editor automatically adds those, and you can't override those by updating this property. This setting will simply append new plugins to the previous list. <br /> If you want to remove any of the presets, we recommend that you use the *removePlugins* property. |
79
-
| removePlugins | A list of plugins that must not be loaded. This setting makes it possible to avoid loading some plugins defined in the plugins/extraPlugins setting without having to touch those. |
79
+
|plugins | Comma-separated list of plug-ins to be used in an editor instance. Note that the actual plug-ins that are loaded might still be affected by two other settings: *extraPlugins* and *removePlugins*. <br /> Updating this setting might remove the plug-ins from the toolbar. If you set this property to an empty string, the editor will load without the toolbar. <br /> If you want to add one or more plug-ins to the toolbar, we recommend that you use *extraPlugins*. If you want to remove one or more from the default list, use *removePlugins*. |
80
+
|extraPlugins | A comma-separated list of additional plug-ins to be loaded. This setting makes it easier to add new plug-ins without touching the plugins setting. <br /> There are many plug-ins that are required for other plug-ins to work. For example, the dialog plug-in is required for the link plug-in. The rich text editor automatically adds those, and you can't override them by updating this property. This setting will simply append new plug-ins to the previous list. <br /> If you want to remove any of the presets, we recommend that you use the *removePlugins* property. |
81
+
| removePlugins | A list of plug-ins that must not be loaded. This setting makes it possible to avoid loading some plug-ins defined in the plugins/extraPlugins setting without having to touch them. |
80
82
81
83
### externalPlugins
82
84
83
-
By using this property, you can write your own plugins and use them in the rich text editor control. Below is the schema for externalPlugins property.
85
+
By using this property, you can write your own plug-ins and use them in the rich text editor control. Below is the schema for externalPlugins property.
84
86
85
87
```xml
86
88
"externalPlugins": [
@@ -107,19 +109,19 @@ By setting this property, you can avoid using the default entity for images so t
107
109
|Attribute |Description |
108
110
|---------|---------|
109
111
|ImageEntityName | The name of the image entity. |
110
-
|ImageFileAttributeName | The attribute name of blob reference. |
112
+
|ImageFileAttributeName | The attribute name of the blob reference. |
111
113
112
114
### disableImages
113
115
114
-
Set this property to true will disable images. This property will have highest priority. This means that when this property is set to true, irrespective of the [imageEntity](#imageentity) property value, images will be disabled. By default, images are enabled.
116
+
Setting this property to true will disable images. This property will have highest priority. This means that when this property is set to true, irrespective of the [imageEntity](#imageentity) property value, images will be disabled. By default, images are enabled.
115
117
116
118
### disableDefaultImageProcessing
117
119
118
120
By default, images will be uploaded using the client API. As soon as an image gets added to the editor, it will be uploaded to the platform. To process images, set this property to true.
119
121
120
122
## Sample rich text editor configuration file
121
123
122
-
The following sample sets the several options in the rich text editorsuch as the height, ___location, default font type, and uses plugin logic. For more information about plugins, see [Use plug-ins to extend business processes](../../developer/common-data-service/plug-ins.md).
124
+
The following sample sets several of the options in the rich text editor—such as the height, ___location, and default font type—and uses plug-in logic. For more information about plug-ins, see [Use plug-ins to extend business processes](../../developer/common-data-service/plug-ins.md).
123
125
124
126
```json
125
127
{
@@ -154,4 +156,4 @@ HTML markup is displayed for fields configured to use the rich text editor contr
154
156
155
157
### See also
156
158
157
-
[Create and edit fields for Common Data Service using Power Apps portal](../common-data-service/create-edit-field-portal.md)
159
+
[Create and edit fields for Common Data Service using Power Apps portal](../common-data-service/create-edit-field-portal.md)
0 commit comments