|
| 1 | +--- |
| 2 | +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" |
| 4 | +ms.custom: "" |
| 5 | +ms.date: 08/10/2020 |
| 6 | +ms.reviewer: "matp" |
| 7 | +ms.service: powerapps |
| 8 | +ms.suite: "" |
| 9 | +ms.tgt_pltfrm: "" |
| 10 | +ms.topic: "article" |
| 11 | +author: "matp" |
| 12 | +ms.author: "Mattp123" |
| 13 | +manager: "kvivek" |
| 14 | +tags: |
| 15 | +search.audienceType: |
| 16 | + - maker |
| 17 | +search.app: |
| 18 | + - PowerApps |
| 19 | + - D365CE |
| 20 | +--- |
| 21 | +# Add the rich text editor control to a model-driven app (Preview) |
| 22 | + |
| 23 | +[!INCLUDE [cc-beta-prerelease-disclaimer](../../includes/cc-beta-prerelease-disclaimer.md)] |
| 24 | + |
| 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. |
| 26 | + |
| 27 | +Some of the format options available: |
| 28 | +- Bold, italic, underline, and strikethrough. |
| 29 | +- Text color, highlight color. |
| 30 | +- Font type and size. |
| 31 | +- Numbered lists, bulleted lists. |
| 32 | +- Hyperlinks. |
| 33 | +- Tables. |
| 34 | + |
| 35 | +<img src="media/rich-text-control.png" alt="Rich text control editor in a model-driven app" height="500" width="520"> |
| 36 | + |
| 37 | +## Add or replace a text field for rich text editing |
| 38 | + |
| 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 | + |
| 41 | +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 | +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. |
| 45 | +5. On the **Field Properties** page, select the **Controls** tab, and then select **Add control**. |
| 46 | +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 | + |
| 49 | + <img src="media/rich-text-control2.png" alt="Rich text control editor configuration" height="497" width="485"> |
| 50 | +8. Save and then publish the form. |
| 51 | + |
| 52 | +## Rich text editor control configuration options |
| 53 | + |
| 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 | +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 | +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 | +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 | + > [!div class="mx-imgBorder"] |
| 59 | + >  |
| 60 | +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 | +5. Select **OK** to close the **Field Properties** page. |
| 62 | +6. On the form editor command bar, select **Publish**. |
| 63 | + |
| 64 | +## Rich text editor properties |
| 65 | + |
| 66 | +### defaultSupportedProps |
| 67 | + |
| 68 | +You can configure all the ckEditor supported properties under this property. A few of the commonly used configurations are described here. For complete documentation about CKEditor configurations, see [CKEditor.config](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html). |
| 69 | + |
| 70 | + |
| 71 | +|Attribute |Description | |
| 72 | +|---------|---------| |
| 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. | |
| 76 | +|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. | |
| 80 | + |
| 81 | +### externalPlugins |
| 82 | + |
| 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. |
| 84 | + |
| 85 | +```xml |
| 86 | +"externalPlugins": [ |
| 87 | + { |
| 88 | + "name": "<<Plugin Name>>", |
| 89 | + "path": "<<Plugin’s folder path>>” |
| 90 | + } |
| 91 | + ] |
| 92 | + |
| 93 | +Example: |
| 94 | +"externalPlugins": [ |
| 95 | + { |
| 96 | + "name": "EmbedMedia", |
| 97 | + "path": "http://aurorav32308.aurorav32308dom.extest.microsoft.com/CITTest/%7B637230928490017310%7D/WebResources/msdyncrm_/AssistEditControl/KBEditor/libs/ckeditor/plugins/embedmedia/" |
| 98 | + } |
| 99 | + ] |
| 100 | +``` |
| 101 | + |
| 102 | +### imageEntity |
| 103 | + |
| 104 | +By setting this property, you can avoid using the default entity for images so that you can enforce additional security if needed. |
| 105 | + |
| 106 | + |
| 107 | +|Attribute |Description | |
| 108 | +|---------|---------| |
| 109 | +|ImageEntityName | The name of the image entity. | |
| 110 | +|ImageFileAttributeName | The attribute name of blob reference. | |
| 111 | + |
| 112 | +### disableImages |
| 113 | + |
| 114 | +Set this property to false will enable images. This property will have highest priority. This means that when this property is set to true, irrespective of the *imageEntity* property value, images will be disabled. By default, images are disabled. |
| 115 | + |
| 116 | +### disableDefaultImageProcessing |
| 117 | + |
| 118 | +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 | + |
| 120 | +### Storing images |
| 121 | + |
| 122 | +The rich text editor control default behavior stores images as Base64. Base64 images require large amount of space and most existing fields might not have sufficient space. When the limit is exceeded, the message "You have exceeded the maximum number of 2000 characters in this field" is displayed in the app. To avoid this problem, as soon as an image gets added to the editor, it will be uploaded to the blob store using the pre-configured API and Base64 content will be replaced with platform URL. |
| 123 | + |
| 124 | +## Sample rich text editor configuration file |
| 125 | + |
| 126 | +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). |
| 127 | + |
| 128 | +```json |
| 129 | +{ |
| 130 | + "defaultSupportedProps": { |
| 131 | + "height": 200, |
| 132 | + "toolbarLocation": "bottom", |
| 133 | + "font_defaultLabel": "Arial", |
| 134 | + "fontSize_defaultLabel": "20", |
| 135 | + "removePlugins": "iframe", |
| 136 | + "extraPlugins": "uploadimage", |
| 137 | + "plugins": "Image" |
| 138 | + }, |
| 139 | + "externalPlugins": [ |
| 140 | + { |
| 141 | + "name": "EmbedMedia", |
| 142 | + "path": "/WebResources/msdyncrm_/AssistEditControl/KBEditor/libs/ckeditor/plugins/embedmedia/" |
| 143 | + } |
| 144 | + ], |
| 145 | + "disableImages": true, |
| 146 | + "imageEntity" : { |
| 147 | + "imageEntityName": "msdyn_richtextfiles", |
| 148 | + "imageFileAttributeName": "msdyn_fileblob" |
| 149 | + } |
| 150 | +} |
| 151 | +``` |
| 152 | + |
| 153 | +## Known issue |
| 154 | + |
| 155 | +HTML markup is displayed in the field configured to use the rich text editor control when the field is part of a subgrid. |
| 156 | +> [!div class="mx-imgBorder"] |
| 157 | +>  |
| 158 | +
|
| 159 | +### See also |
| 160 | + |
| 161 | +[Create and edit fields for Common Data Service using Power Apps portal](../common-data-service/create-edit-field-portal.md) |
0 commit comments