{"id":39215,"date":"2024-09-16T14:47:12","date_gmt":"2024-09-16T09:17:12","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=39215"},"modified":"2024-09-16T14:47:12","modified_gmt":"2024-09-16T09:17:12","slug":"steps-to-add-copilot-control-to-your-rich-text-editor","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2024\/09\/steps-to-add-copilot-control-to-your-rich-text-editor\/","title":{"rendered":"Steps to Add Copilot Control to Your Rich Text Editor"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-39216\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor.png\" alt=\"Add Copilot Control to Your Rich Text Editor\" width=\"1400\" height=\"800\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor.png 1400w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-300x171.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1024x585.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-768x439.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-660x377.png 660w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p style=\"text-align: justify;\">Copilot is a powerful AI tool that enhances user experience by providing intelligent suggestions and automation. Whether you&#8217;re composing emails or working on other forms, <a href=\"https:\/\/www.inogic.com\/services\/ai-solutions\/microsoft-dynamics365-powerplatform-chatgpt-copilot-consulting-services\/\" target=\"_blank\" rel=\"noopener\">Copilot<\/a> helps you draft content faster and more efficiently by offering contextual recommendations and completing sentences based on the text you&#8217;ve already written. This feature is designed to boost productivity, allowing users to focus on more strategic tasks while Copilot handles routine content creation.<\/p>\n<p style=\"text-align: justify;\">By default, Copilot is available in the email form&#8217;s rich text editor toolbar, giving users immediate access to its capabilities. To enable Copilot in the rich text editor on other forms, simply adjust the editor&#8217;s properties in the advanced configuration file.<\/p>\n<h2 style=\"text-align: justify;\"><strong>JSON Configuration for Enabling Copilot<\/strong><\/h2>\n<p style=\"text-align: justify;\">To enable Copilot for a <a href=\"https:\/\/learn.microsoft.com\/en-us\/power-apps\/maker\/model-driven-apps\/rich-text-editor-control#customize-a-specific-instance-of-the-rich-text-editor\" target=\"_blank\" rel=\"noopener\">specific Rich Text editor field<\/a>, start by creating a Web Resource where you can define the properties to update or override, using the RTEGlobalConfiguration_Readonly.json file as the base configuration for the Rich Text editor control.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1.png\"><img decoding=\"async\" class=\"alignnone wp-image-39217 size-full\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1.png\" alt=\"Add Copilot Control to Your Rich Text Editor\" width=\"1893\" height=\"874\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1.png 1893w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1-300x139.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1-1024x473.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1-768x355.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1-1536x709.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-1-660x305.png 660w\" sizes=\"(max-width: 1893px) 100vw, 1893px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">We&#8217;ve created a JavaScript Web Resource file named \u2018RTESecureFormMessageConfiguration.js\u2019. In this file, we&#8217;ve added the `copilotrefinement` and `CopilotRefinement` values to the existing `extraPlugins` and `toolbar` properties to enable Copilot.<\/p>\n<p style=\"text-align: justify;\">For reference, you can consult the <a href=\"https:\/\/learn.microsoft.com\/en-us\/power-apps\/maker\/model-driven-apps\/rich-text-editor-control?WT.mc_id=DX-MVP-5002876#example-configuration-file\" target=\"_blank\" rel=\"noopener\">sample configuration file<\/a>, which lists all the properties and their corresponding values.<\/p>\n<p style=\"text-align: justify;\">Here\u2019s the JSON code I uploaded to my web resource. You&#8217;ll notice that `copilotrefinement` has been added to both the `extraPlugins` and `toolbar` properties.<\/p>\n<pre class=\"lang:css gutter:true start:1\">{\r\n  \"defaultSupportedProps\": {\r\n    \"extraPlugins\": \"copilotrefinement,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\",\r\n    \"toolbar\": [\r\n      [ \"CopilotRefinement\" ],\r\n      [ \"CopyFormatting\" ],\r\n      [ \"Font\" ],\r\n      [ \"FontSize\" ],\r\n      [ \"Bold\" ],\r\n      [ \"Italic\" ],\r\n      [ \"Underline\" ],\r\n      [ \"BGColor\" ],\r\n      [ \"TextColor\" ],\r\n      [ \"BulletedList\" ],\r\n      [ \"NumberedList\" ],\r\n      [ \"Outdent\" ],\r\n      [ \"Indent\" ],\r\n      [ \"Blockquote\" ],\r\n      [ \"JustifyLeft\" ],\r\n      [ \"JustifyCenter\" ],\r\n      [ \"JustifyRight\" ],\r\n      [ \"Link\" ],\r\n      [ \"Unlink\" ],\r\n      [ \"Subscript\" ],\r\n      [ \"Superscript\" ],\r\n      [ \"Strike\" ],\r\n      [ \"Image\" ],\r\n      [ \"BidiLtr\" ],\r\n      [ \"BidiRtl\" ],\r\n      [ \"Undo\" ],\r\n      [ \"Redo\" ],\r\n      [ \"RemoveFormat\" ],\r\n      [ \"Table\" ]\r\n    ]\r\n  }\r\n}\r\n<\/pre>\n<p style=\"text-align: justify;\">I\u2019ve already set up a custom entity for storing articles, which includes a \u2018Content\u2019 field configured as a Rich Text format in a Multiple Line of Text. Next, I will add the Rich Text Editor Control component to this content field.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2.png\"><img decoding=\"async\" class=\"alignnone wp-image-39218 size-full\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2.png\" alt=\"Add Copilot Control to Your Rich Text Editor\" width=\"1919\" height=\"874\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2.png 1919w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2-300x137.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2-1024x466.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2-768x350.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2-1536x700.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-2-660x301.png 660w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">In the static value field, enter the URL of your web resource. This will activate Copilot for your rich text editor. You can specify the full path, but keep in mind that you\u2019ll need to update it every time you move the web resource to a different environment.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3.png\"><img decoding=\"async\" class=\"alignnone wp-image-39219 size-full\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3.png\" alt=\"Add Copilot Control to Your Rich Text Editor\" width=\"1919\" height=\"875\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3.png 1919w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3-300x137.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3-1024x467.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3-768x350.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3-1536x700.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-3-660x301.png 660w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p>This Copilot feature will only help you adjust the tone of your text, offering options like Friendly, Professional, and Formal. It does not provide a length adjustment feature, unlike the Rich Text Editor in the email form. To use Copilot, select the text whose tone you want to adjust.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4.png\"><img decoding=\"async\" class=\"alignnone wp-image-39220 size-full\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4.png\" alt=\"This Copilot feature will only help you adjust the tone of your text, offering options like Friendly, Professional, and Formal. It does not provide a length adjustment feature, unlike the Rich Text Editor in the email form. To use Copilot, select the text whose tone you want to adjust.\" width=\"1919\" height=\"877\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4.png 1919w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4-300x137.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4-1024x468.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4-768x351.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4-1536x702.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-4-660x302.png 660w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">If you want to apply Copilot to all fields using the Rich Text Editor Control rather than specifying it for each individual field, you should update the existing `RTEGlobalConfiguration.json` file with the same JSON configuration. This will automatically add the \u201cAdjust with Copilot\u201d option to the form, even if you don\u2019t specify the URL in the static value when customizing the form.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5.png\"><img decoding=\"async\" class=\"alignnone wp-image-39221 size-full\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5.png\" alt=\"This Copilot feature will only help you adjust the tone of your text, offering options like Friendly, Professional, and Formal. It does not provide a length adjustment feature, unlike the Rich Text Editor in the email form. To use Copilot, select the text whose tone you want to adjust.\" width=\"1919\" height=\"874\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5.png 1919w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5-300x137.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5-1024x466.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5-768x350.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5-1536x700.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/09\/Add-Copilot-Control-to-Your-Rich-Text-Editor-5-660x301.png 660w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<h2 style=\"text-align: justify;\"><strong>Conclusion<\/strong><\/h2>\n<p style=\"text-align: justify;\">Integrating the Copilot control with the Rich Text Editor enhances your ability to adjust the tone of your content. By configuring your web resource and updating the `RTEGlobalConfiguration.json` file, you can enable Copilot across all Rich Text Editor fields, ensuring consistent tone adjustment capabilities throughout your application.<\/p>\n<p><strong><div class=\"su-heading su-heading-style-default su-heading-align-center\" id=\"\" style=\"font-size:15px;margin-bottom:5px\"><div class=\"su-heading-inner\"> Experience the power of Dynamics 365 and Power Platform with Copilot! <\/div><\/div><\/strong><\/p>\n<p>Stay ahead with the latest updates in Copilot, integrating <a href=\"https:\/\/bit.ly\/45q16LG\">Microsoft Copilot<\/a> into your developments. Connect with us at <a href=\"mailto:crm@inogic.com\">crm@inogic.com<\/a> for personalized AI-enabled solutions tailored to your business needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Copilot is a powerful AI tool that enhances user experience by providing intelligent suggestions and automation. Whether you&#8217;re composing emails or working on other forms, Copilot helps you draft content faster and more efficiently by offering contextual recommendations and completing sentences based on the text you&#8217;ve already written. This feature is designed to boost productivity,\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2024\/09\/steps-to-add-copilot-control-to-your-rich-text-editor\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2746,44],"tags":[2569],"class_list":["post-39215","post","type-post","status-publish","format-standard","hentry","category-copilot","category-power-apps","tag-rich-text-editor"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/39215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=39215"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/39215\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=39215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=39215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=39215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}