Add the rich text editor control to a model-driven app

The rich text editor control provides the app user with 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.

Some of the format options available are:

  • Bold, italic, underline, and strikethrough
  • Text color, highlight color
  • Font type and size
  • Numbered lists and bulleted lists
  • Hyperlinks
  • Tables
  • Images

For a full list of default options, see Use the rich text editor toolbar.

Rich text control editor in a model-driven app

Add or replace a text column for rich text editing

Create a new text column and configure the control, or replace an existing text column. The rich text editor control can be used with single or multi-line text columns.

Simple configuration

To enable the rich text editor with default values on any new or existing text column, you can set the Format option to Rich text using the following steps. More information on default values: Use the default web resource for organization-wide changes

  1. Sign in to Power Apps.

    Note

    If you have an existing rich text field, you can use the API to change the format to Richtext. More information: Data type format conversions

  2. On the left navigation pane, select Solutions, open the solution that you want, open the table that you want, and then select the Columns area.

  3. Select +Add > Column, enter a name for your column, select a text Data type, and then select the Rich text format option.

  4. Save the column. You can now add the new column to any existing or new form for this table.

Advanced configuration

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 enable the rich text editor with a specific configuration on a new or existing column, complete the following steps.

  1. Sign in to Power Apps.
  2. On the left navigation pane, select Solutions, open the solution that you want, open the table that you want, and then select the Forms area.
  3. Select the form, and then select Edit form > Edit form in new tab.
  4. On the form designer canvas, add or create a text column or select an existing text column, such as the custom multi-line text column used in this article.
  5. On the right column properties pane, expand the Components section, select + Component, and then select Rich Text Editor Control.
  6. On the Add rich text editor control pane, select from the following options, and then select Done:
    • Bind to table column: We don’t recommend that you enable this option because this property doesn’t support binding to a different table column.

    • Static value: If you want to customize the rich text editor appearance, features, and behavior, enter the relative URL to the JavaScript web resource that contains the properties you want. More information: Create and use advanced configuration for the rich text editor control

    • Web, Phone, and Tablet: Enable all if you want all client apps to have the ability to use rich text in the column.

      Rich text control editor configuration
  7. Save, and then Publish the form.

Create and use advanced configuration for the rich text editor control

To create and use advanced configuration for the rich text editor control, follow these steps:

  1. Create a JavaScript (.js) file that contains the JSON format text file with the defaultSupportedProps structure and configuration you want. More information: More sample rich text editor configurations and Rich text editor properties

  2. In Power Apps, create a JavaScript (JS) type web resource using the JSON file created in step 1. More information: Create or edit model-driven app web resources to extend an app

  3. Add the relative URL for the JavaScript web resource (for example /WebResources/contoso_toolbartoprte) in the Static value field on the Add rich text editor control pane . More information: Add or replace a text column for rich text editing

    Tip

    • The web resource URL is located next to the URL field on the web resource definition you created in the previous step.
    • Although you can use the absolute URL for the Static value, by using the relative URL, the web resource will continue to work after it has been imported into another environment as a solution. URL for JavaScript web resource
  4. Save, and then Publish the form.

Best practices for using the rich text editor

Consider the following when using the rich text editor:

  • The best performance is achieved when the HTML content size is 1 MB or less. When your HTML content size exceeds 1 MB, you may notice slower response times for loading and editing content. By default, image content is referenced from the content HTML but isn't stored as part of the HTML content, so in the default configuration, images don't negatively impact performance.

  • Rich text fields will store HTML tags, which are required for formatting along with user entered data. When setting the maximum size for your field, make sure to assign a large enough size for both the HTML tags and user-entered data.

  • By default, the rich text editor will upload images to the Azure Blob storage store and they won’t be stored as part of the field. Images will be stored in the same field as base64 when the submitter doesn’t have permissions to the msdyn_richtextfiles entity. Base64 content is large, so you generally don't want to store images as base64.

How configuration is applied to the rich text editor

The experience and capabilities of the rich text editor are controlled with configuration. The default configuration for the rich text editor control has property and values that are intended to meet normal rich text needs but they can be adjusted. Configuration properties and values can be applied to a specific rich text editor control instance. There can be up to three levels of configuration that can be applied to each rich text editor instance. The logic used for applying properties and values are as follows:

  1. The non-editable global configuration file RTEGlobalConfiguration_Readonly.json is loaded.

  2. The editable global configuration file RTEGlobalConfiguration.json is loaded.

    • The properties in this configuration replace* the same named properties in the prior configuration file.
  3. The instance specific configuration file, if it exists, is loaded. See Advanced configuration for more information on instance level configuration.

    • The properties in this configuration replace* the same named properties in either of the prior configuration files.

    Note

    All properties are replaced except for extraPlugins, which are merged. Merging extraPlugins allows the use of a wide range of plugins in RTEGlobalConfiguration.json using externalPlugins and out-of-box provided plugins. Then, only the necessary plugins can be activated by adding them to the extraPlugins values in the instance specific configuration.

A rich text-enabled column has a limited set of configuration that can be configured for read-only or disabled state. You can learn more about this configuration from the "readOnlySettings" property description.

Rich text editor properties

The JSON file is comprised of properties set as name and value pairs. There are two types of configurations: the defaultSupportedProps section, and individual configuration settings that provide various functionality.

The defaultSupportedProps is a set of properties for the plug-ins, and includes support for all the CKEditor configurations. More information: Visualization of the rich text editor configuration file. The defaultSupportedProps isn’t limited to only plug-in properties documented from CKEditor, but also allows you to set properties for more plug-ins that you add or create. More information about CKEditor plug-ins: Plug-ins available

The individual configuration settings allow you to change how your editor behaves and functions.

Visualization of the rich text editor configuration file

The following two images visually identify the two configuration sections. For the full configuration file, go to Use the default web resource for organization-wide changes.

defaultSupportedProps

More information: defaultSupportedProps defaultsupportedprops configuration visualization.

Individual configuration settings

More information: Individual configuration settings Individual configuration settings visualization.

defaultSupportedProps

You can configure all of the CKEditor-supported properties under this property. A few of the commonly used and custom configurations are described below. For complete documentation about CKEditor configurations, see CKEditor.config. The rich text editor currently uses CKEditor version 4.17.1.

Attribute Description Default value
height

Sets the initial height of the content editor. The default is 185 px.

"height": 185

stickyStyle

Sets the actual default font size and style.

The stickyStyle plugin creates a wrapper around your content using the element specified by "stickyStyles_defaultTag", which is initially configured as "div", and can be changed to "p" or any alternate tag.

"stickyStyle": {
   "font-size": "9pt",
   "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
},
"stickyStyles_defaultTag": "div"
font_defaultLabel

Sets the default label that is displayed in the toolbar for font style. The default is Segoe UI. The default label is only visual and isn't functional, and stickyStyle configuration applies the functional font and size.

"font_defaultLabel": "Segoe UI"

fontSize_defaultLabel

Sets the default label that is displayed in the toolbar for font size. The default is 9. The default label is only visual and isn't functional, and stickyStyle configuration applies the functional font and size.

"fontSize_defaultLabel": "9"

toolbarLocation

The location of the user interface where the toolbar will be rendered. Supported values are top and bottom. The default is bottom.

"toolbarLocation": "bottom"

toolbar

A list of toolbar buttons that will be loaded.

"toolbar": [
  [ "CopyFormatting" ],
  [ "Font" ],
  [ "FontSize" ],
  [ "Bold" ],
  [ "Italic" ],
  [ "Underline" ],
  [ "BGColor" ],
  [ "TextColor" ],
  [ "BulletedList" ],
  [ "NumberedList" ],
  [ "Outdent" ],
  [ "Indent" ],
  [ "Blockquote" ],
  [ "JustifyLeft" ],
  [ "JustifyCenter" ],
  [ "JustifyRight" ],
  [ "Link" ],
  [ "Unlink" ],
  [ "Subscript" ],
  [ "Superscript" ],
  [ "Strike" ],
  [ "Image" ],
  [ "BidiLtr" ],
  [ "BidiRtl" ],
  [ "Undo" ],
  [ "Redo" ],
  [ "RemoveFormat" ],
  [ "Table" ]
]
plugins

Comma-separated list of plug-ins to be used in an editor instance. The actual plug-ins that are loaded might still be affected by two other settings: extraPlugins and removePlugins.

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.

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.

"plugins": [["button,toolbar,dialogui,dialog,autogrow,notification,clipboard,textmatch,fakeobjects,link,autolink,basicstyles,bidi,blockquote,panelbutton,panel,floatpanel,colorbutton,colordialog,listblock,richcombo,menu,contextmenu,copyformatting,enterkey,entities,popup,find,floatingspace,font,format,htmlwriter,horizontalrule,indent,indentblock,indentlist,justify,lineutils,openlink,list,liststyle,maximize,undo,menubutton,notificationaggregator,xml,ajax,pastetools,pastefromword,pastetext,preview,table,quicktable,removeformat,resize,selectall,showborders,sourcearea,specialchar,stylescombo,tab,tabletools,tableresize,tableselection,widgetselection,widget,wysiwygarea,textwatcher"]]

extraPlugins

A comma-separated list of other plug-ins to be loaded. This setting makes it easier to add new plug-ins without touching the plugins setting.

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.

If you want to remove any of the presets, we recommend that you use the removePlugins property.

"extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,bidi,blockquote,button,collapser,colorbutton,colordialog,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,filebrowser,filetools,find,floatpanel,font,iframerestrictor,indentblock,justify,notification,panel,panelbutton,pastefromword,quicktable,selectall,stickystyles,superimage,tableresize,tableselection,tabletools,uploadfile,uploadimage,uploadwidget"

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.

"removePlugins": "a11yhelp,codemirror,magicline,scayt,showborders"

superimageImageMaxSize

The maximum size in megabytes (MB) allowed for embedded images when using the superimage plugin. The default is 5.

"superimageImageMaxSize": 5

disallowedContent

Lets you disallow elements that you do not want to have in your content. You are able to disallow entire elements or by attributes, classes, and styles. For more information about the CKEditor "disallowedContent" configuration, see Disallowed Content Rules.

"disallowedContent": "form[action]; *[formaction]; script; *[on*]"

linkTargets

Allows you to configure which link target options are available for users when they create links.

Link targets - ```notSet``` : No target set for the document in the anchor tag - ```frame``` : Opens the document in the specified frame - ```popupWindow``` : Opens the document in a popup window - ```_blank``` : Opens the document in a new window or tab - ```_top``` : Opens the document in the full body of the window - ```_self``` : Opens the document in the same window or tab where the link is activated - ```_parent``` : Opens the document in the parent frame



Example:

"linkTargets": ["notSet", "_blank"]

Individual configuration settings

You can configure other configuration settings that affect how your editor functions.

Attribute Description Default value
attachmentEntity

By setting this property and specifying a different table, you can avoid using the default table for files so that you can enforce more security if needed.

More information: File columns (Microsoft Dataverse) - Power Apps

Syntax:

 "attachmentEntity": {
	"name": "<<name of the image table>>",
	"fileAttributeName": "<<attribute name of the blob reference>>"
}

Example:

"attachmentEntity": {
	"name": "msdyn_mystorageforcustomizedsecurity",
	"fileAttributeName": "msdyn_customfilestorage"
}

Default:

"attachmentEntity": {
	"name": "msdyn_richtextfiles",
	"fileAttributeName": "msdyn_fileblob"
}
disableContentSanitization By default, content sanitization is disabled to allow successful copying and pasting of rich text content from external sources. When enabled, the content sanitization will remove some of the custom attributes or tags. This configuration applies only to edit mode. Read-only or disabled state rendering will always be sanitized.

"disableContentSanitization": true

disableDefaultImageProcessing

By default, images will be uploaded using the client API. As soon as an image is added to the editor, it will be uploaded to the platform. To process images, set this property to true.

"disableDefaultImageProcessing": false

disableImages

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 property value, images will be disabled. By default, images are enabled.

"disableImages": false

externalPlugins

By using this property, you can write your own plug-ins and use them in the rich text editor control.

No default value as this is how you can extend your functionality by adding other plugins not originally provided. The path value can be an absolute or relative URL.

Example:

"externalPlugins": [
    {
      "name": "<<Plugin Name>>",
      "path": "<<Plugin’s folder path>>”
    }
  ]

Example:

"externalPlugins": [
  {
    "name": "EmbedMedia",
    "path": "/WebResources/msdyncrm_/myplugins/embedmedia/"
  }
]
imageEntity

By setting this property and specifying a different table, you can avoid using the default table for images so that you can enforce more security if needed.

More information: Image columns (Microsoft Dataverse) - Power Apps

Syntax:

 "imageEntity": {
	"imageEntityName": "<<name of the image table>>",
	"imageFileAttributeName": "<<attribute name of the blob reference>>"
}

Example:

"imageEntity": {
	"imageEntityName": "msdyn_mystorageforcustomizedsecurity",
	"imageFileAttributeName": "msdyn_customimagestorage"
}

Default:

"imageEntity": {
	"imageEntityName": "msdyn_richtextfiles",
	"imageFileAttributeName": "msdyn_imageblob"
}
readOnlySettings

By setting this property, you can configure other behaviors for the column when viewed in a read-only or disabled state.

Example:

"readOnlySettings": {
	"height:": 500,
	"showFullScreenExpander": true
}

Default:

"readOnlySettings": {
}
readOnlySettings

By setting this property, you can allow more content to be displayed.

Example:

 "sanitizerAllowlist": {
	"attributes": ["data-id-wrapper"],
	"cssProperties": ["filter","list-style-type"],
	"domains": ["([a-z0-9]+[.])*.youtube.com","www.randomsite.com"],
	"protocols": ["file","ftp"],
	"tags": ["input"]
}

Default:

"sanitizerAllowlist": {
	"attributes": [],
	"cssProperties": [],
	"domains": [],
	"protocols": [],
	"tags": []
}
showAsTabControl

By setting this property, you can display more commands above the editor window.

Must be set to true to enable the following attributes:

  • showFullScreenExpander
  • showHtml
  • showPreview
  • showPreviewHeaderWarning

"showAsTabControl": false

showFullScreenExpander

This property adds the full screen expand/collapse functionality, which allows you to expand and use the editor in full-screen mode.

Depends on showAsTabControl set to true.

"showFullScreenExpander": false

showHtml

This property adds the option to display and edit the html content directly.

Depends on showAsTabControl set to true.

"showHtml": false

showPreview

This property adds the option to preview the editor content rendered as html. Previewing lets you see how your content will display if you share and render the content as HTML outside of the editor.

Depends on showAsTabControl set to true.

"showPreview": false

showPreviewHeaderWarning

This property allows you to show/hide the warning message that is displayed when previewing content.

Depends on showAsTabControl and showPreview set to true.

"showPreviewHeaderWarning": false

Commonly used rich text editor configurations

The following are common configurations for the rich text editor. These sample configurations can be used to enable specific types of rich text experiences. For each sample, you create a JSON web resource or modify the default web resource configuration. More information: Create and use advanced configuration for the rich text editor control and Use the default web resource for organization-wide changes

Set the default font to Calibri with font-size 11pt

Set your default font and size to match the Microsoft Windows defaults. This example shows which settings you use to implement this change in your experience.

Set these defaultSupportedProps properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "font_defaultLabel": "Calibri"
   
   "fontSize_defaultLabel": "11"
   
   "stickyStyle": {
     "font-size": "11pt",
     "font-family": "Calibri/Calibri, Helvetica, sans-serif;"
   }

Make line breaks (Enter key) create a <br> instead of <p>

The default behavior for the enter key creates paragraph blocks with the <p> HTML tag (also used when interpretting pasted content). Paragraph blocks are used in HTML to group information. In some cases, when creating new or pasting information from Microsoft Word or other content editor, due to how each browser interprets the formatting for the paragraph block tag (<p>) slightly differently, you might want to use the <br> HTML tag instead of paragraph blocks. The vertical spacing for <br> HTML tags in certain cases can be more visually consistent across a variety of browsers and experiences. This example shows you how to change from <p> to <br>.

Set this defaultSupportedProps property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "enterMode": 2

All content pasted or created is HTML 5 compliant

The rich text editor control works best with HTML 5 content, although HTML 4 tags and formatting can also be used successfully. In some cases, the mixture of both HTML 4 and HTML 5 tags can create usability challenges when selecting and setting fonts and sizes. Use of "allowedContent" can ensure all your content is HTML 5. This example allows all supported HTML 5 tags. Any non-compliant tags are converted to their HTML 5 equivalent.

Set this defaultSupportedProps property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "allowedContent": "a(*)[*]{*};abbr(*)[*]{*};address(*)[*]{*};area(*)[*]{*};article(*)[*]{*};aside(*)[*]{*};audio(*)[*]{*};b(*)[*]{*};base(*)[*]{*};bdi(*)[*]{*};bdo(*)[*]{*};blockquote(*)[*]{*};body(*)[*]{*};br(*)[*]{*};button(*)[*]{*};canvas(*)[*]{*};caption(*)[*]{*};cite(*)[*]{*};code(*)[*]{*};col(*)[*]{*};colgroup(*)[*]{*};data(*)[*]{*};datalist(*)[*]{*};dd(*)[*]{*};del(*)[*]{*};details(*)[*]{*};dfn(*)[*]{*};dialog(*)[*]{*};div(*)[*]{*};dl(*)[*]{*};dt(*)[*]{*};em(*)[*]{*};embed(*)[*]{*};fieldset(*)[*]{*};figcaption(*)[*]{*};figure(*)[*]{*};footer(*)[*]{*};form(*)[*]{*};h1(*)[*]{*};h2(*)[*]{*};h3(*)[*]{*};h4(*)[*]{*};h5(*)[*]{*};h6(*)[*]{*};head(*)[*]{*};header(*)[*]{*};hr(*)[*]{*};html(*)[*]{*};i(*)[*]{*};iframe(*)[*]{*};img(*)[*]{*};input(*)[*]{*};ins(*)[*]{*};kbd(*)[*]{*};label(*)[*]{*};legend(*)[*]{*};li(*)[*]{*};link(*)[*]{*};main(*)[*]{*};map(*)[*]{*};mark(*)[*]{*};meta(*)[*]{*};meter(*)[*]{*};nav(*)[*]{*};noscript(*)[*]{*};object(*)[*]{*};ol(*)[*]{*};optgroup(*)[*]{*};option(*)[*]{*};output(*)[*]{*};p(*)[*]{*};param(*)[*]{*};picture(*)[*]{*};pre(*)[*]{*};progress(*)[*]{*};q(*)[*]{*};rp(*)[*]{*};rt(*)[*]{*};ruby(*)[*]{*};s(*)[*]{*};samp(*)[*]{*};section(*)[*]{*};select(*)[*]{*};small(*)[*]{*};source(*)[*]{*};span(*)[*]{*};strong(*)[*]{*};style(*)[*]{*};sub(*)[*]{*};summary(*)[*]{*};sup(*)[*]{*};svg(*)[*]{*};table(*)[*]{*};tbody(*)[*]{*};td(*)[*]{*};template(*)[*]{*};textarea(*)[*]{*};tfoot(*)[*]{*};th(*)[*]{*};thead(*)[*]{*};time(*)[*]{*};title(*)[*]{*};tr(*)[*]{*};track(*)[*]{*};u(*)[*]{*};ul(*)[*]{*};var(*)[*]{*};video(*)[*]{*};wbr(*)[*]{*};"

More sample rich text editor configurations

Add the full screen expander

Set these Individual configuration settings properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: Individual configuration settings)


 "showAsTabControl": true
 
 "showFullScreenExpander": true
 

Screen expander control.

Add the HTML source view tab

Set these Individual configuration settings properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: Individual configuration settings)


 "showAsTabControl": true
 
 "showHtml": true

HTML tab control.

Add a simple toolbar with font size, bold, italic, underline, and highlight

Set this defaultSupportedProps property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "toolbar": [ { "items": [ "FontSize", "Bold", "Italic", "Underline", "BGColor" ] } ]

Controls for a simple editor.

Remove the toolbar to make a rich text rendering surface

Set this defaultSupportedProps property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "toolbar": []

No toolbar.

Add a new font list and set Brush Script MT as the default font with a default size of 20 px

Set these defaultSupportedProps properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "font_names": "Brush Script MT/'Brush Script MT', cursive;Calibri/Calibri, Helvetica, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;"
   
   "font_defaultLabel": "Brush Script MT"
   
   "fontSize_sizes": "8/8px;12/12px;20/20px;32/32px"
   
   "fontSize_defaultLabel": "20"
   
   "stickyStyle": {
     "font-size": "20px",
     "font-family": "'Brush Script MT', cursive"
   }

Set a new default font.

Position the toolbar at the top of the rich text editor

Set this defaultSupportedProps property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "toolbarLocation": "top"

Toolbar positioned at the top of the rich text editor.

Start the editor at 30-px height and then autogrow to fit content

Set these defaultSupportedProps properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "autoGrow_onStartup": false
   
   "autoGrow_maxHeight": 0
   
   "autoGrow_minHeight": 30
   
   "height": 30

Typing into the rich text area will increase it to fit the content.

Fix the height of the editor at 500 px

Set these defaultSupportedProps properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "removePlugins": [ "autogrow" ]
   
   "height": 500

With a fixed height, the editor remains at the same height. When enough content is added, a scroll bar appears.

Create a plain text surface that removes all html tags except for the "br" tag

Set these defaultSupportedProps properties in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "enterMode": 2
   
   "shiftEnterMode": 2
   
   "allowedContent": "*"
   
   "disallowedContent": "*"
   
   "forcePasteAsPlainText": true
   
   "toolbar": []
   
   "removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools"

Set this Individual configuration settings property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: Individual configuration settings)


 "disableImages": true

Creating a plain text surface makes the strips html.

Remove the context menu so right-clicking will work with the default browser's spell check

Enabling this functionality removes the contextual right-click editing capability.

Set this defaultSupportedProps property in your configuration file. Each value should be followed by a , (comma) unless it is the last value: (More information: defaultSupportedProps)


   "removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools"

Remove the context menu so right-clicking will work with the default browser spell check.

Use the default web resource for organization-wide changes

The default RTE webresource is available with the display name RTEGlobalConfiguration.json. This configuration is used for all instances of the RTE control and can be used to make organization-wide changes. This includes RTE used in timeline rich-text notes, knowledge management, and single and multi-line fields that are configured to use the RTE control.

{
	"defaultSupportedProps": {
		"allowedIframeDomains": [],
		"autoGrow_onStartup": true,
		"basicEntities": true,
		"browserContextMenuOnCtrl": true,
		"copyFormatting_allowRules": true,
		"customConfig": "",
		"dialog_backgroundCoverColor": "black",
		"disableNativeSpellChecker": false,
		"enterMode": 3,
		"extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,bidi,blockquote,button,collapser,colorbutton,colordialog,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,filetools,find,floatpanel,font,iframerestrictor,indentblock,justify,panel,panelbutton,pastefromword,quicktable,selectall,stickystyles,superimage,tableresize,tableselection,tabletools",
		"fillEmptyBlocks": true,
		"font_defaultLabel": "Segoe UI",
		"font_names": "Angsana New/'Angsana New', 'Leelawadee UI', Sathu, serif;Arial/Arial, Helvetica, sans-serif;Arial Black/'Arial Black', Arial, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;Calibri/Calibri, Helvetica, sans-serif;Cambria/Cambria, Georgia, serif;Candara/Candara, Optima, sans-serif;Century Gothic/'Century Gothic', sans-serif;Comic Sans MS/'Comic Sans MS';Consolas/Consolas, Courier, monospace;Constantia/Constantia, 'Hoefler Text', serif;Corbel/Corbel, Skia, sans-serif;Cordia New/'Cordia New', 'Leelawadee UI', Silom, sans-serif;Courier New/'Courier New';DaunPenh/DaunPenh, 'Leelawadee UI', 'Khmer MN', sans-serif;Franklin Gothic Book/'Franklin Gothic Book', 'Avenir Next Condensed', sans-serif;Franklin Gothic Demi/'Franklin Gothic Demi', 'Avenir Next Condensed Demi Bold', sans-serif;Franklin Gothic Medium/'Franklin Gothic Medium', 'Avenir Next Condensed Medium', sans-serif;Garamond/Garamond, Georgia, serif;Gautami/Gautami, 'Nirmala UI', 'Telugu MN', sans-serif;Georgia/Georgia, serif;Impact/Impact, Charcoal, sans-serif;Iskoola Pota/'Iskoola Pota', 'Nirmala UI', 'Sinhala MN', sans-serif;Kalinga/Kalinga, 'Nirmala UI', 'Oriya MN', sans-serif;Kartika/Kartika, 'Nirmala UI', 'Malayalam MN', sans-serif;Latha/Latha, 'Nirmala UI', 'Tamil MN', sans-serif;Leelawadee UI/'Leelawadee UI', Thonburi, sans-serif;Lucida Console/'Lucida Console', Monaco, monospace;Lucida Handwriting/'Lucida Handwriting', 'Apple Chancery', cursive;Lucida Sans Unicode/'Lucida Sans Unicode';Mangal/Mangal, 'Nirmala UI', 'Devanagari Sangam MN', sans-serif;Nirmala UI/'Nirmala UI', sans-serif;Nyala/Nyala, Kefa, sans-serif;Palatino Linotype/'Palatino Linotype', 'Book Antiqua', Palatino, serif;Raavi/Raavi, 'Nirmala UI', 'Gurmukhi MN', sans-serif;Segoe UI/'Segoe UI', 'Helvetica Neue', sans-serif;Shruti/Shruti, 'Nirmala UI', 'Gujarati Sangam MN', sans-serif;Sitka Heading/'Sitka Heading', Cochin, serif;Sitka Text/'Sitka Text', Cochin, serif;Sylfaen/Sylfaen, Mshtakan, Menlo, serif;TW Cen MT/'TW Cen MT', 'Century Gothic', sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/'Times New Roman', Times, serif;Times/Times, 'Times New Roman', serif;Trebuchet MS/'Trebuchet MS';Tunga/Tunga, 'Nirmala UI', 'Kannada MN', sans-serif;Verdana/Verdana, Geneva, sans-serif;Vrinda/Vrinda, 'Nirmala UI', 'Bangla MN', sans-serif;メイリオ/Meiryo, メイリオ, 'Hiragino Sans', sans-serif;仿宋/FangSong, 仿宋, STFangsong, serif;微軟正黑體/'Microsoft JhengHei', 微軟正黑體, 'Apple LiGothic', sans-serif;微软雅黑/'Microsoft YaHei', 微软雅黑, STHeiti, sans-serif;新宋体/NSimSun, 新宋体, SimSun, 宋体, SimSun-ExtB, 宋体-ExtB, STSong, serif;新細明體/PMingLiU, 新細明體, PMingLiU-ExtB, 新細明體-ExtB, 'Apple LiSung', serif;楷体/KaiTi, 楷体, STKaiti, serif;標楷體/DFKai-SB, 標楷體, BiauKai, serif;游ゴシック/'Yu Gothic', 游ゴシック, YuGothic, sans-serif;游明朝/'Yu Mincho', 游明朝, YuMincho, serif;隶书/SimLi, 隶书, 'Baoli SC', serif;黑体/SimHei, 黑体, STHeiti, sans-serif;굴림/Gulim, 굴림, 'Nanum Gothic', sans-serif;궁서/Gungsuh, 궁서, GungSeo, serif;돋움/Dotum, 돋움, AppleGothic, sans-serif;맑은 고딕/'Malgun Gothic', '맑은 고딕', AppleGothic, sans-serif;바탕/Batang, 바탕, AppleMyungjo, serif;바탕체/BatangChe, 바탕체, AppleMyungjo, serif;MS Pゴシック/'MS PGothic', 'MS Pゴシック', 'MS Gothic', 'MS ゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;MS P明朝/'MS PMincho', 'MS P明朝', 'MS Mincho', 'MS 明朝', 'Hiragino Mincho ProN', serif",
		"fontSize_defaultLabel": "9",
		"fontSize_sizes": "8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;22/22pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt;72/72pt;",
		"height": 185,
		"keystrokes": [],
		"linkDefaultProtocol": "https://",
		"listStylePosition": "inside",
		"pasteAzureBlobImageAsBase64": false,
		"qtCellBorderColor": "rgb(171, 171, 171)",
		"qtCellBorderStyle": "solid",
		"qtCellBorderWidth": "1px",
		"qtCellPadding": "1",
		"qtCellSpacing": "0",
		"qtCellWith": "120px",
		"pasteFilter": null,
		"qtColumns": 8,
		"qtRows": 6,
		"qtStyle": {
			"border-collapse": "collapse",
			"font-size": "9pt"
		},
		"removeDialogTabs": "flash:Upload;link:upload",
		"removePlugins": "a11yhelp,codemirror,magicline,scayt,showborders",
		"skin": "superowa",
		"stickyStyle": {
			"font-size": "9pt",
			"font-family": "'Segoe UI','Helvetica Neue',sans-serif"
		},
		"stickyStyles_defaultTag": "div",
		"superimageImageMaxSize": 5,
		"toolbarcollapser_enableResizer": true,
		"toolbarLocation": "bottom",
		"uploadRecordId": []
	},
	"attachmentEntity": {
		"name": "msdyn_richtextfiles",
		"fileAttributeName": "msdyn_fileblob"
	},
	"disableContentSanitization": true,
	"disableDefaultImageProcessing": false,
	"disableImages": false,
	"imageEntity": {
		"imageEntityName": "msdyn_richtextfiles",
		"imageFileAttributeName": "msdyn_imageblob"
	},
	"readOnlySettings": {
	},
	"sanitizerAllowlist": {
		"attributes": [],
		"cssProperties": [],
		"domains": [],
		"protocols": [],
		"tags": []
	},
	"showAsTabControl": false,
	"showFullScreenExpander": false,
	"showHtml": false,
	"showPreview": false,
	"showPreviewHeaderWarning": false
}

Find the current setting for a rich text editor configuration

  1. In a Microsoft Edge or Google Chrome web browser, run your model-driven app and open a form that has the rich text editor control, such as an account row.

  2. Press Ctrl while clicking the rich text editor control area, and then select Inspect.

  3. In the inspection pane, select the Console tab, and then select the parent Main.aspx page in the drop-down list box on the command bar.

    Select the Console tab and then select the parent main.aspx page from the drop-down list box.

  4. Select Clear console on the inspection pane command bar.

    Clear console command.

  5. In the inspection pane console, enter CKEDITOR.config. to display the different configurations.

    List of CK Editor configurations.

  6. Select a configuration, such as autoGrow_minHeight, to display the current setting.

Use the rich text editor toolbar

The rich text editor toolbar provides features and functionality that allows you to work with rich text format in notes and email.

Formatting options

The following table describes the different formatting features and functionality options that are available in the rich text editor that you can use.

Icon Name Shortcut key Description
Format Painter. Format Painter Ctrl+Shift+C, Ctrl+Shift+V Apply the look of a particular section to another section.
Font. Font Ctrl+Shift+F Select a font. The application considers the font that you select as the default font. Segoe UI is the default font if you don't select any.

Note: When you select any formatted content, the font name for that content displays. If your selection contains multiple fonts, the topmost font name of your selection is displayed.
Font Size. Font size Ctrl+Shift+P Change the size of your text. The application considers the font size that you select as the default font size. 12 is the default font if you don't select any.

Note: When you select any formatted content, the font size for that content displays. If your selection contains multiple font sizes, the topmost font name of your selection is displayed.
Bold. Bold Ctrl+B Make your text bold.
Italic. Italic Ctrl+I Italicize your text.
Underline. Underline Ctrl+U Underline your text.
Text Highlight Color. Text Highlight Color Make your text stand out by highlighting it in a bright color.
Font Color. Font Color Change the color of your text.
Attachment. Attachment Attach a file. After you've uploaded a file, you can select the link to preview the file in the Attachment Preview dialog.
Bullets. Bullets Create a bulleted list.
Numbering. Numbering Create a numbered list.
Decrease Indent. Decrease Indent Move your paragraph closer to the margin.
Increase Indent. Increase Indent Move your paragraph farther away from the margin.
Block Quote. Block Quote Apply a block-level quotation format in your content.
Align Left. Align Left Ctrl+L Align your content with the left margin. (Commonly used for body text to make it easier to read.)
Align Center. Align Center Ctrl+E Center your content on the page. (Commonly used for a formal appearance.)
Align Right. Align Right Ctrl+R Align your content with the right margin. (Commonly used for a formal appearance.)
Link. Link Create a link in your document for quick access to web pages and files.

Pasted or typed URL text is converted into a link. For example, "http://myexample.com" will become "http://myexample.com".

In the Link dialog box, choose the type of link you'd like to insert.

The Link Info tab allows you to choose the link type as well as set the link protocol and URL.

The Target tab is only available for the URL link type. It specifies the location where the link will open after you select it.
Remove Link. Unlink Delete a link in your email or document.

When you place the cursor on a link, the Unlink button on the toolbar becomes active. Select the button to remove the link and make it plain text.
Superscript. Superscript Type small letters just above the line of text.
Subscript. Subscript Type small letters just below the line of text.
Strikethrough. Strikethrough Cross out text by drawing a line through it.
Insert Image. Insert Image You can insert an image by directly copying and pasting it inline in the editor, dragging and dropping it from your desktop or local folder directly into the editor, or by typing a URL. The following formats are supported: .PNG, .JPG., or .GIF.

To insert an image inline in your article:
1. Drag and drop the image or copy and paste it directly into the article.
2. Drag any corner of the image to resize it.

To insert an image using a URL or navigating to the local image:
1. Choose Insert Image.
2. In the Image property dialog, choose from the following options:
  • Select Browse to navigate to the image on your computer.
  • Or specify the web address of the image, and properties to define how the image will appear in the email or article.

  • Note:
    • If the image is located on the external server, use the full absolute path.
    • If the image is located on a local server, you can use a relative path.
    • If you want the image to be linked to a target, add a URL for the image.
    • You can also specify if you want the targeted page to open in a new window, topmost window, same window, or parent window.
Left to Right. Left to Right Change the text to left-to-right for content such as a paragraph, header, table, or list. Commonly used for bi-directional language content. This is the default setting.
Right to Left. Right to Left Change the text to right-to-left for content such as a paragraph, header, table, or list. Commonly used for bi-directional language content. The default setting is left-to-right.
Undo Typing. Undo Typing Undo changes you made to the content.
Redo Typing. Redo Typing Redo changes you made to the content.
Clear All Formatting. Clear All Formatting Remove all formatting from a selection of text, leaving only the normal, unformatted text.
Add a Table. Add a Table Add a table to your content.

After adding a table, you can do any of the following:

  • Resize table columns by clicking and dragging your mouse to resize to the columns to the desired width.
  • Select one or several cells within a table and apply specific formatting, add links to the selection, or cut, copy, or paste entire rows or columns.
  • Right-click to access the properties. This supports features such as cell type, width and height, word wrapping, alignment, merging, and splitting cells horizontally and vertically, inserting or deleting rows and columns, row and column span, and cell and border color.
Accessibility help Alt+0 Display list of accessibility shortcuts available when using the rich text editor control.
Expand Toolbar. Expand Toolbar Displays when the toolbar is collapsed and not all options appear. Select to expand the toolbar and make all options visible.

Tip

You can access your browser's context menu by selecting Ctrl + right-click. This is useful if you need to use your browser's built-in spellchecker. Otherwise, you can right-click to provide contextual formatting for any element you are using.

Also, an alternative to your browser's built-in spellchecker is the Microsoft Editor browser extension. Microsoft Editor works seamlessly with the rich text editor control, and when enabled, provides fast and easy inline grammar and spellcheck capabilities.

Accessibility shortcuts

The following table outlines a list of accessibility shortcuts available when using the rich text editor control. You can access this list while composing content by pressing Alt+0.

Type Shortcut key Description
General Alt+F11 Toggle full-screen view.
Tab navigation Alt+Ctrl+0 Go to editor toolbar.
Tab navigation Alt+1 Go to the rich-text editor.
Tab navigation Alt+2 Go to the HTML editor.
Tab navigation Alt+3 Go to the preview view.
General editor commands Alt+F10 Navigate to the editor toolbar. Move to the next and previous toolbar group with Tab and Shift+Tab. Move to the next and previous toolbar button with Right Arrow or Left Arrow. Press Space or Enter to activate the toolbar button.
General editor commands Alt+- Expand/Collapse the editor toolbar.
General editor commands See description. Editor dialog: Inside a dialog, press Tab to navigate to the next dialog element, press Shift+Tab to move to the previous dialog element, press Enter to submit the dialog, press ESC to cancel the dialog. When a dialog has multiple tabs, the tab list can be reached either with Alt+F10 or with Tab, following the dialog tabbing order. With a tab list focused, move to the next and previous tab with Right and Left Arrow, respectively.
General editor commands See description. Editor list box: Inside a list box, move to next list item with Tab or Down Arrow. Move to previous list item with Shift+Tab or Up Arrow. Press Space or Enter to select the list option. Press ESC to close the list box.
Base commands Ctrl+Z Undo command.
Base commands Shift+Ctrl+Z Redo command.
Base commands Ctrl+B Bold command.
Base commands Ctrl+I Italic command.
Base commands Ctrl+U Underline command.
Base commands Alt+0 Accessibility help.
Base commands Esc Cancel operation.

Offline experience

The rich text editor control is available when working offline with a basic configuration. The following is a list of supported plugins and formatting options when working offline. All configuration added through web resource files are not available while offline.

Plugins available for offline

The following plugins are available to the rich text editor while offline.

ajax,autogrow,basicstyles,bidi,blockquote,button,confighelper,contextmenu,dialog,dialogui,editorplaceholder,enterkey,entities,fakeobjects,floatingspace,floatpanel,format,horizontalrule,htmlwriter,indent,indentblock,indentlist,justify,lineutils,list,listblock,maximize,menu,menubutton,notification,notificationaggregator,panel,panelbutton,popup,preview,removeformat,resize,richcombo,selectall,showborders,sourcearea,specialchar,stylescombo,tab,textmatch,textwatcher,toolbar,undo,widgetselection,wysiwygarea,xml

Formatting options for offline

The following table describes the different formatting features and functionality options that are available in the rich text editor while offline.

Icon Name Shortcut key Description
Bold. Bold Ctrl+B Make your text bold.
Italic. Italic Ctrl+I Italicize your text.
Underline. Underline Ctrl+U Underline your text.
Bullets. Bullets Create a bulleted list.
Numbering. Numbering Create a numbered list.
Decrease Indent. Decrease Indent Move your paragraph closer to the margin.
Increase Indent. Increase Indent Move your paragraph farther away from the margin.
Block Quote. Block Quote Apply a block-level quotation format in your content.
Align Left. Align Left Ctrl+L Align your content with the left margin. (Commonly used for body text to make it easier to read.)
Align Center. Align Center Ctrl+E Center your content on the page. (Commonly used for a formal appearance.)
Align Right. Align Right Ctrl+R Align your content with the right margin. (Commonly used for a formal appearance.)
Strikethrough. Strikethrough Cross out text by drawing a line through it.
Left to Right. Left to Right Change the text to left-to-right for content such as a paragraph, header, table, or list. Commonly used for bi-directional language content. This is the default setting.
Right to Left. Right to Left Change the text to right-to-left for content such as a paragraph, header, table, or list. Commonly used for bi-directional language content. The default setting is left-to-right.
Undo Typing. Undo Typing Undo changes you made to the content.
Redo Typing. Redo Typing Redo changes you made to the content.
Clear All Formatting. Clear All Formatting Remove all formatting from a selection of text, leaving only the normal, unformatted text.

Frequently asked questions

Q: Why are typed characters slow to display?

A. Large content size can cause latency. More information: Best practices for using the rich text editor. Spelling or grammar checks can also slow the typing performance.

Known issues

  • HTML markup is displayed for columns configured to use the rich text editor control that are displayed in components other than a column on a form which do not have the format set to RichText. For example, this occurs in views, subgrids, paginated reports, and portals.

HTML markup displayed in a column on a subgrid. To resolve this issue, see Simple configuration for the steps necessary to set the Format option to Rich text.

See also

Create and edit columns for Microsoft Dataverse using Power Apps portal