Skip to content

Commit 485d00f

Browse files
authored
Merge pull request #3288 from MicrosoftDocs/edit_1985842
edit for task 1985842
2 parents 9739890 + 0861cf8 commit 485d00f

File tree

1 file changed

+23
-21
lines changed

1 file changed

+23
-21
lines changed

powerapps-docs/maker/model-driven-apps/rich-text-editor-control.md

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Use the rich text editor control in Power Apps | MicrosoftDocs
3-
description: "Learn how to use the news control to get the latest news about your customers"
3+
description: "The rich text editor control provides the app user a WYSIWYG editing area for formatting text"
44
ms.custom: ""
55
ms.date: 08/10/2020
66
ms.reviewer: "matp"
@@ -22,41 +22,43 @@ search.app:
2222

2323
[!INCLUDE [cc-beta-prerelease-disclaimer](../../includes/cc-beta-prerelease-disclaimer.md)]
2424

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 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:
2628

27-
Some of the format options available:
2829
- Bold, italic, underline, and strikethrough.
2930
- Text color, highlight color.
3031
- Font type and size.
31-
- Numbered lists, bulleted lists.
32+
- Numbered lists and bulleted lists.
3233
- Hyperlinks.
3334
- Tables.
3435

3536
<img src="media/rich-text-control.png" alt="Rich text control editor in a model-driven app" height="500" width="520">
3637

3738
## Add or replace a text field for rich text editing
3839

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.
4041

4142
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.
4243
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**.
4546
5. On the **Field Properties** page, select the **Controls** tab, and then select **Add control**.
4647
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).
4849

4950
<img src="media/rich-text-control2.png" alt="Rich text control editor configuration" height="497" width="485">
5051
8. Save and then publish the form.
5152

5253
## Rich text editor control configuration options
5354

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+
5557
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)
5658
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)
5759
3. Open the **Field Properties** page for the text field with the rich text editor control, and then next to **RichTextEditorControl_URL** select **Edit**.
5860
> [!div class="mx-imgBorder"]
59-
> ![Rich text editor control url](media/richtexteditorcontrol-url.png)
61+
> ![Rich text editor control URL](media/richtexteditorcontrol-url.png)
6062
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.
6163
5. Select **OK** to close the **Field Properties** page.
6264
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
7072

7173
|Attribute |Description |
7274
|---------|---------|
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. |
7678
|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. |
8082

8183
### externalPlugins
8284

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.
8486

8587
```xml
8688
"externalPlugins": [
@@ -107,19 +109,19 @@ By setting this property, you can avoid using the default entity for images so t
107109
|Attribute |Description |
108110
|---------|---------|
109111
|ImageEntityName | The name of the image entity. |
110-
|ImageFileAttributeName | The attribute name of blob reference. |
112+
|ImageFileAttributeName | The attribute name of the blob reference. |
111113

112114
### disableImages
113115

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.
115117

116118
### disableDefaultImageProcessing
117119

118120
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.
119121

120122
## Sample rich text editor configuration file
121123

122-
The following sample sets the several options in the rich text editor such 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&mdash;such as the height, ___location, and default font type&mdash;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).
123125

124126
```json
125127
{
@@ -154,4 +156,4 @@ HTML markup is displayed for fields configured to use the rich text editor contr
154156
155157
### See also
156158

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

Comments
 (0)