Adicionar o controle Editor de rich text a um aplicativo baseado em modelo

O controle editor de rich text é um editor leve, baseado em HTML, criado no popular CKEditor. Ele permite criar, colar e editar texto formatado em seus aplicativos baseados em modelo. Para formatar texto no editor, você pode use a barra de ferramentas do editor, insira marcas HTML ou cole texto formatado de outros aplicativos, como um navegador da Web ou Word.

Você pode personalizar a aparência, os recursos e o comportamento do editor.

Captura de tela do editor de rich text padrão em um aplicativo baseado em modelo.

Aprimoramentos do editor de texto moderno

O editor de texto moderno foi projetado para se alinhar às interfaces familiares e intuitivas de aplicativos Microsoft, como Outlook, Word e OneNote. Essa experiência, definida por padrão, apresenta um design moderno, modo escuro, temas de alto contraste e um novo recurso de Copilot para aprimorar os recursos de edição de texto.

> [! OBSERVAÇÃO] > - A versão clássica do editor de rich text foi preterida a partir de abril de 2025. Se você tiver problemas com a atualização ou o uso do editor de rich text moderno, entre em contato com Microsoft Atendimento ao Cliente. > - Se você personalizou a versão anterior do editor de rich text, talvez seja necessário recriar suas personalizações no editor de rich text moderno.

Adicionar o controle do editor de rich text a uma coluna de texto em um formulário

  1. Faça login no Power Apps.

  2. No painel de navegação esquerdo, selecione Soluções.

  3. Abra a solução e, em seguida, abra a tabela da solução.

  4. Na área de Experiências de dados, selecione Formulários e abra o formulário que contém a coluna de texto à qual você deseja adicionar o editor de rich text.

  5. Na tela do designer de formulários, selecione uma coluna de texto existente. Como alternativa, selecione Nova coluna de tabela para criar uma nova coluna de texto, insira um Nome de exibição, selecione Texto>Rich text para o Tipo de dados e selecione Salvar. Coluna de texto rico > [!NOTE] > Se você quiser adicionar o controle de editor de texto rico a uma coluna que já existe, primeiro altere o tipo de dados da coluna para Texto (se ela ainda não for uma coluna de texto) e depois selecione o Formato com a opção Texto rico.

  6. No painel da coluna Propriedades, expanda a lista Componentes, selecione + Componente e, em seguida, selecione Controle do Editor de Rich Text.

  7. No painel Adicionar controle Editor de rich text, selecione Web, Telefone e Tablet para permitir que os aplicativos executados em qualquer dispositivo usem o editor.

    Se desejar personalizar o editor, insira a URL relativa de seu arquivo de configuração, um recurso JavaScript da Web que contenha as propriedades que você deseja alterar, na caixa Valor estático. Se você deixar este campo vazio, o editor usará sua configuração padrão.

  8. Selecione Concluído. A coluna de rich-text é adicionada ao formulário.

    Captura de tela do controle do editor rich text em um formulário do aplicativo baseado em modelo.

  9. Selecione Salvar e publicar para aplicar as alterações ao formulário.

Adicionar o controle Editor de rich text a uma coluna de texto

Você também pode criar uma coluna para uma tabela que usa o controle do editor rich text. As etapas a seguir mostram como criar uma coluna de texto que você pode adicionar posteriormente a um formulário para um aplicativo controlado por modelos.

  1. Faça login no Power Apps.

  2. No painel de navegação esquerdo, selecione Soluções.

  3. Abra uma solução e uma tabela na solução.

  4. Na área Esquema , selecione Colunas e abra uma coluna de texto.

    Se a tabela não contiver uma coluna de texto, selecione Nova coluna e informe um nome para a coluna.

  5. No painel direito, selecione Formatar e, em seguida, selecione Rich text.

  6. Salve a coluna.

Personalizar o controle Editor de rich text

As personalizações a seguir estão disponíveis na experiência clássica do editor de rich text.

Power Apps permite que você altere as propriedades do controle do editor de rich text para personalizar sua aparência, recursos e comportamento. Para personalizar uma instância específica do controle, especifique propriedades e seus valores em um arquivo de configuração individual formatado em JSON. Para personalizar a configuração global do controle, altere as propriedades no arquivo de configuração padrão.

Níveis de personalização

Você pode aplicar até três níveis ou camadas de configuração para personalizar o editor de rich text:

  1. No nível mais básico, cada instância do controle obtém sua configuração do arquivo RTEGlobalConfiguration_Readonly.json. O arquivo é somente leitura, portanto não é possível alterar essas propriedades diretamente.

    > [! OBSERVAÇÃO] >RTEGlobalConfiguration.json não se aplica a email, artigos de conhecimento, modelos de email e assinaturas.

  2. No próximo nível, cada instância do controle obtém sua configuração das propriedades no arquivo RTEGlobalConfiguration.json, se houver alguma presente. Essa configuração é colocada sobre a anterior, portanto as propriedades neste arquivo substituem as mesmas propriedades nomeadas no arquivo somente leitura.

  3. Por fim, no nível mais alto, uma instância específica do controle obtém sua configuração de um arquivo de configuração específico, se houver. Essa configuração é colocada sobre a anterior, portanto as propriedades neste arquivo substituem as mesmas propriedades nos dois arquivos nos níveis inferiores.

O sistema não substitui todas as propriedades por aquelas em uma configuração de nível superior. As propriedades extraPlugins são mescladas para permitir o uso de uma ampla variedade de plug-ins externos e prontos para uso na configuração padrão. Essa operação de mesclagem permite ativar e desativar plug-ins conforme necessário no arquivo de configuração para instâncias específicas do controle.

Personalizar uma instância específica do editor de rich-text

  1. Em Visual Studio Code ou em outro editor de texto, crie um arquivo e dê a ele um nome significativo.

    O arquivo RTEGlobalConfiguration.json contém a configuração padrão do controle Editor de rich text, ou a configuração global. Se estiver personalizando o controle em, vamos supor, um formulário de contato, você poderá nomear o arquivo como algo parecido com RTEContactFormConfiguration.json.

  2. Copie e cole o seguinte snippet de código no arquivo:

{
"defaultSupportedProps": {
  "propertyName": "value",
  "propertyName": "value",
  "propertyName": "value"
},
"propertyName": "value",
"propertyName": "value",
}

O último par propertyName:value não termina com vírgula.

  1. Substitua propertyName e valor pelas propriedades do controle Editor de rich text que você deseja alterar. Os valores da cadeia de caracteres devem ser colocados entre aspas.

    Fornecemos alguns exemplos de configurações, mas você pode definir outros para atender às suas necessidades.

  2. Em Power Apps, criar um JavaScript (JS) tipo de recurso web usando o arquivo JSON que você criou na etapa 1.

  3. Adicione o controle do editor de rich text a uma coluna de texto em um formulário e no painel Adicionar Controle de Editor de Rich Text>Valor estático, insira a URL relativa do recurso da Web JavaScript.

    Embora seja possível inserir a URL absoluta do recurso da Web, recomendamos que você insira a URL relativa. Dessa forma, o recurso da Web ainda funcionará se você importá-lo como uma solução para um ambiente diferente, desde que o caminho relativo seja o mesmo.

    Por exemplo, se a URL do recurso da Web for https://yourorg.crm.dynamics.com/WebResources/rtecontactform, a URL relativa será /WebResources/rtecontactform.

  4. Selecione Concluído.

  5. Selecione Salvar e publicar para aplicar as alterações ao formulário.

Personalizar o editor de rich text globalmente

O arquivo de configuração global editável RTEGlobalConfiguration.json é o segundo nível de personalização que você pode aplicar. Por padrão, o arquivo está vazio. Isso significa que todas as instâncias do editor de rich text usam as propriedades do arquivo somente leitura RTEGlobalConfiguration_Readonly.json, a menos que você crie um arquivo de configuração para uma instância específica do controle.

Se as suas necessidades de negócios exigirem que você personalize o controle em todos os lugares, especifique os valores necessários no arquivo RTEGlobalConfiguration.json. Use o arquivo somente leitura como exemplo para certificar-se de inserir pares de propriedade-valor no formato correto.

Usar Copilot para refinar texto no editor

Copilot usa algoritmos de processamento de linguagem natural para ajudar a melhorar o conteúdo escrito. Você pode adicionar o Copilot ao editor de texto formatado e, em seguida, obter sugestões para melhorar a gramática, a clareza ou a qualidade geral do seu texto. Aprenda como usar o Copilot no editor de texto rico.

Propriedades do editor de rich-text

O arquivo JSON que determina a "aparência" de uma instância do editor de rich text contém dois conjuntos de propriedades:

Exemplo de arquivo de configuração

O código a seguir é um exemplo de arquivo JSON que contém propriedades defaultSupportedProps e propriedades de configuração individuais. Se uma propriedade tiver um valor padrão, o valor padrão será mostrado. Se uma propriedade não tiver um valor padrão, um valor de exemplo será mostrado para ilustrar a sintaxe. As propriedades são descritas nas duas tabelas a seguir.

{
    "defaultSupportedProps": {
        "height": 185,
        "stickyStyle": {
            "font-size": "12pt",
            "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
        },
        "enterMode": 1,
        "stickyStyles_defaultTag": "div",
        "font_defaultLabel": "Segoe UI",
        "fontSize_defaultLabel":"12",
        "toolbarLocation": "top",
        "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" ]
        ],
        "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",
        "toolbarcollapser_enableResizer": false,
        "placeholder":"",
        "linkTargets": ["notSet", "_blank"],
        "stylesSet": "default",
        "fontSize_sizes": "8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px",
        "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",
        "copyFormatting_allowRules": "b s u i em strong span p div td th ol ul li(*)[*]{*}"
    },
    "readOnlySettings": {
    "height": 500,
    "showFullScreenExpander": true
    },
    "sanitizerAllowlist": {
    "attributes": [],
    "cssProperties": [],
    "domains": [],
    "protocols": [],
    "tags": []
    },
    "disableContentSanitization": true,
    "disableOnLoadEditModeSanitization": true,
    "disableDefaultImageProcessing": true,
    "showFullScreenExpander": false,
    "showAsTabControl": false,
    "showHtml": false
}

defaultSupportedProps

A tabela a seguir descreve as propriedades mais comumente usadas, mas você pode configurar todas as propriedades com suporte pelo CKEditor. O controle de editor de rich text usa o CKEditor 4.

Propriedade Description Valor padrão
height Define a altura inicial da área do conteúdo, em pixels. "185"
stickyStyle Defina a fonte e o tamanho do editor. Consulte defaultSupportedProps
stickyStyles_defaultTag Cria um wrapper ao redor do texto na área de conteúdo do editor. Inicialmente está definido como "div", mas você pode alterá-lo para "p" ou qualquer marca alternativa. "div"
font_defaultLabel Define o rótulo da fonte exibido na barra de ferramentas. O rótulo é apenas para a aparência e não é funcional. A propriedade stickyStyle determina a fonte e o tamanho do editor. "Segoe UI"
fontSize_defaultLabel Define o rótulo do tamanho da fonte exibido na barra de ferramentas. O rótulo é apenas para a aparência e não é funcional. A propriedade stickyStyle determina a fonte e o tamanho do editor. "9"
toolbarLocation Define a localização da barra de ferramentas na área de conteúdo do editor. Os valores com suporte são "superior" e "inferior". "inferior"
barra de ferramentas Lista os botões da barra de ferramentas a serem exibidos. Consulte defaultSupportedProps
plug-ins Lista plug-ins predefinidos que o editor pode usar. Os plug-ins nessa lista poderão ser diferentes dos plug-ins carregados se extraPlugins e removePlugins receberem um valor. Se você definir essa propriedade como uma cadeia de caracteres vazia, o editor será carregado sem a barra de ferramentas. Consulte defaultSupportedProps
extraPlugins Adiciona plug-ins à lista plugins para carregar plug-ins adicionais.<br/>Muitos plug-ins exigem outros plug-ins para funcionar. O editor de rich text os adiciona automaticamente e não é possível usar essa propriedade para subustituí-los. Use removePlugins em seu lugar. Consulte defaultSupportedProps
removePlugins Lista de plug-ins que não devem ser carregados. Use-a para alterar quais plug-ins são carregados sem alterar as listas de plugins e extraPlugins. Consulte defaultSupportedProps
superimageImageMaxSize Define o tamanho máximo em megabytes (MB) permitido para imagens incorporadas ao usar o plug-in de superimagem. "5"
linkTargets Permite configurar quais opções de destino do link ficam disponíveis para os usuários ao criar links:<br/>- "notSet": nenhum destino definido<br/>- "frame": abre o documento no frame especificado<br/>- popupWindow": abre o documento em uma janela pop-up<br/>- "_blank": abre o documento em uma nova janela ou guia<br/>- "_top": abre o documento em toda a área da janela<br/>- "_self": abre o documento na mesma janela ou guia em que o link é ativado<br/>- "_parent": abre o documento no frame pai "notSet", "_blank"

Propriedades individuais

A tabela a seguir descreve mais propriedades que você pode usar para personalizar o controle Editor de rich text.

Propriedade Description Valor padrão
disableContentSanitization A limpeza de conteúdo remove alguns dos atributos ou marcas personalizados do conteúdo de rich text. Ela está desabilitada por padrão para permitir a cópia e a colagem de conteúdo de rich text de fontes externas. Essa propriedade se aplica somente ao modo de edição. Quando o controle do editor é somente leitura ou está desabilitado, o conteúdo é sempre limpo. verdadeiro
disableDefaultImageProcessing Por padrão, as imagens inseridas no editor são carregadas no attachmentEntity definido na configuração. Os usuários externos podem não ter privilégios para exibir o conteúdo da tabela. Em vez disso, defina essa propriedade como verdadeira para armazenar imagens como cadeias de caracteres em base64 diretamente na coluna configurada para usar o controle editor de rich text. falso
disableImages Determina se as imagens podem ser inseridas no editor. Essa propriedade tem a prioridade mais alta. Quando essa propriedade for definida como verdadeira, as imagens serão desabilitadas, independentemente do valor da propriedade imageEntity. falso
sanitizerAllowlist Lista outros tipos de conteúdo que podem ser exibidos no editor. Consulte defaultSupportedProps
showAsTabControl Permite que você exiba mais comandos acima da área de conteúdo. Deve ser definido como verdadeiro para usar as seguintes propriedades: showFullScreenExpander, showHtml, showPreview, showPreviewHeaderWarning falso
showFullScreenExpander Determina se o editor pode ser usado no modo de tela inteira. showAsTabControl deve ser definido como verdadeiro. falso
showHtml Permite que os usuários exibam e editem o conteúdo HTML diretamente. showAsTabControl deve ser definido como verdadeiro. falso
showPreview Permite que os usuários visualizem o conteúdo do editor renderizado como HTML. showAsTabControl deve ser definido como verdadeiro. falso
showPreviewHeaderWarning Permite que você mostre ou oculte a mensagem de aviso exibida durante a visualização do conteúdo. showAsTabControl e showPreview devem ser definidos como verdadeiro. falso
allowSameOriginSandbox Trata o conteúdo no editor da mesma origem que o aplicativo de renderização.<br/>Use esta propriedade com cuidado. Use apenas conteúdo externo confiável. Quando essa propriedade estiver definida como verdadeira, qualquer conteúdo externo poderá ter acesso a recursos internos. falso

Configurações de exemplo

As configurações de exemplo a seguir criam personalizações específicas do editor de rich text na experiência clássica. Você pode usá-las como estão ou como ponto de partida para personalizar uma instância específica do editor de rich-text ou globalmente.

Defina a fonte padrão para Calibri de 11 pontos

Defina estas propriedades defaultSupportedProps no seu arquivo de configuração. Cada valor, exceto o último, deve ser seguido por uma vírgula (,).

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

Faça com que a tecla Enter insira uma nova linha em vez de um bloco de parágrafo

Por padrão, pressionar a tecla Enter cria um bloco de parágrafo com a tag HTML <p. O HTML usa blocos de parágrafo para agrupar informações, como parágrafos em um documento Word. Os navegadores podem formatar a tag <p de maneira ligeiramente diferente, portanto, para manter a consistência visual, talvez você queira usar a tag de nova linha ou quebra de linha <br\ em vez dela.

Defina esta propriedade defaultSupportedPropsno seu arquivo de configuração. Acrescente uma vírgula (,) após este valor, a menos que seja a última propriedade do arquivo.

"enterMode": 2,

Permitir que o editor use a tela inteira

Defina estas propriedades individuais no seu arquivo de configuração. Cada valor, exceto o último, deve ser seguido por uma vírgula (,).

"showFullScreenExpander": true,

Captura de tela do editor de rich text aberto no designer de tela inteira.

Permitir a exibição e edição de conteúdo HTML

Para permitir que os usuários exibam e editem o HTML do conteúdo diretamente, mostre a guia HTML.

Defina estas propriedades individuais no seu arquivo de configuração. Cada valor, exceto o último, deve ser seguido por uma vírgula (,).

"showAsTabControl": true,
"showHtml": true,

Mostrar uma barra de ferramentas simplificada ou removê-la completamente

Por padrão, a barra de ferramentas do editor contém todas as ferramentas de formatação disponíveis. Para fornecer uma barra de ferramentas simplificada, use a propriedade toolbar e especifique as ferramentas que os usuários podem usar para formatar seu conteúdo.

Defina esta propriedade defaultSupportedPropsno seu arquivo de configuração. Acrescente uma vírgula (,) após este valor, a menos que seja a última propriedade do arquivo.

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

Captura de tela do editor de rich text com uma barra de ferramentas simplificada.

Para remover totalmente a barra de ferramentas, defina o valor de toolbar como '[]' (dois colchetes).

Adicionar uma nova lista de fontes e definir a fonte Lucida Handwriting de 20 pontos como fonte padrão

Defina estas propriedades defaultSupportedProps no seu arquivo de configuração. Cada valor, exceto o último, deve ser seguido por uma vírgula (,).

"font_names": "Lucida Handwriting/'Lucida Handwriting', cursive;Calibri/Calibri, Helvetica, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;"
"font_defaultLabel": "Lucida Handwriting"
"fontSize_sizes": "8/8pt;12/12pt;20/20pt;32/32pt"
"fontSize_defaultLabel": "20"
"stickyStyle": {
  "font-size": "20pt",
  "font-family": "'Lucida Handwriting', cursive"
},

Captura de tela do editor de rich text com Lucida Handwriting como a fonte padrão e uma nova lista de fontes.

Posicionar a barra de ferramentas na parte superior do editor de rich-text

Defina esta propriedade defaultSupportedPropsno seu arquivo de configuração. Acrescente uma vírgula (,) após este valor, a menos que seja a última propriedade do arquivo.

"toolbarLocation": "top",

Iniciar o editor com 30 pixels de altura e aumente para ajustar o conteúdo

Defina estas propriedades defaultSupportedProps no seu arquivo de configuração. Cada valor, exceto o último, deve ser seguido por uma vírgula (,).

"autoGrow_onStartup": false,
"autoGrow_maxHeight": 8000,
"autoGrow_minHeight": 30,
"height": 30,

Captura de tela que ilustra que digitar na área de rich text ou colar uma imagem a aumenta para que o conteúdo caiba.

Fixar a altura do editor em 500 pixels

Defina estas propriedades defaultSupportedProps no seu arquivo de configuração. Cada valor, exceto o último, deve ser seguido por uma vírgula.

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

Captura de tela que ilustra que, com uma altura fixa, quando conteúdo suficiente é adicionado à área de rich text, uma barra de rolagem é exibida.

Fazer com que o menu de contexto (clique com o botão direito) use o menu de contexto padrão do navegador

Para substituir o menu de contexto do controle do editor pelo menu de contexto padrão do navegador, remova o plug-in de contextmenu.

Defina esta propriedade defaultSupportedPropsno seu arquivo de configuração. Acrescente uma vírgula (,) após este valor, a menos que seja a última propriedade do arquivo.

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

A barra de ferramentas do editor de rich-text

A tabela a seguir descreve as diferentes ferramentas de formatação disponíveis no editor de rich text por padrão.

Ícone Name Tecla de atalho Description
Pincel de formatação. Copiar Formatação Ctrl+Shift+C, Ctrl+Shift+V Aplique a aparência de uma seção específica de outra seção.
Fonte. Nome da Fonte Ctrl+Shift+F Selecione uma fonte. O aplicativo considera a fonte selecionada como a fonte padrão. Segoe UI é a fonte padrão se você não selecionar uma.<br/><br/>Quando você seleciona o conteúdo formatado, o nome da fonte aplicada a ele é exibido. Se sua seleção contiver várias fontes, a primeira aplicada à seleção é exibida.
Tamanho da fonte. Tamanho da fonte Ctrl+Shift+P Altere o tamanho do seu texto. O aplicativo considera o tamanho da fonte selecionada como o tamanho padrão. 12 é o tamanho padrão se você não selecionar um.<br/><br/>Quando você seleciona o conteúdo formatado, o tamanho da fonte aplicado a ele é exibido. Se sua seleção contiver vários tamanhos, o primeiro aplicado à seleção será exibido.
Negrito. Negrito Ctrl+B Colocar o texto a negrito.
Itálico. Itálico Ctrl+I Coloque o texto em itálico.
Sublinhado. Sublinhado Ctrl+U Sublinhar o texto.
Cor do Realce do Texto. Cor da tela de fundo Destaque o seu texto realçando-o em uma cor brilhante.
Cor da fonte. Cor do Texto Altere a cor do seu texto.
Marcadores. Inserir/Remover Lista com Marcadores Crie uma lista com marcadores.
Numeração. Inserir/Remover Lista Numerada Criar uma lista numerada.
Diminuir Recuo. Diminuir Recuo Mova o parágrafo para mais perto da margem.
Aumentar Recuo. Aumentar Recuo Afaste o parágrafo da margem.
Citação em Bloco. Citação em Bloco Aplique um formato de cotação em nível de bloco ao seu conteúdo.
Alinhar à Esquerda. Alinhar à Esquerda Ctrl+L Alinhe seu conteúdo à margem esquerda.
Alinhar ao Centro. Centralizar Ctrl+E Centralize seu conteúdo na página.
Alinhar à Direita. Alinhar à Direita Ctrl+R Alinhe seu conteúdo com a margem direita.
Vínculo. Vínculo Crie um link no seu documento para acesso rápido a páginas da Web e outros recursos de nuvem. Insira ou cole o texto de âncora na caixa Exibir Texto e, em seguida, insira ou cole a URL na caixa de URL .<br/><br/>Opcionalmente, selecione um Tipo de Link e protocolo se o link for para algo diferente de uma página da Web. Para especificar onde um link do tipo URL deve ser aberto, selecione a guia Destino e selecione um Destino.<br/><br/>A URL colada ou digitada é automaticamente convertida em um link. Por exemplo, http://myexample.com se tornará &lt;a href="http://myexample.com"&gt;http://myexample.com&lt;/a&gt;. Para editar ou remover um link existente, selecione o texto vinculado e use o menu Link .
Sobrescrito. Sobrescrito Digite letras minúsculas logo acima da linha de texto.
Subscrito. Subscrito Digite letras minúsculas logo abaixo da linha de texto.
Tachado. Tachado Risque o texto desenhando uma linha sobre ele.
Inserir Imagem. Imagem Para inserir uma imagem, cole-a da área de transferência na área de conteúdo ou arraste um arquivo de imagem de uma pasta para a área de conteúdo. Arraste qualquer canto da imagem para redimensioná-la. O controle dá suporte a imagens .png, .jpg.e .gif.<br/><br/>Para ter mais controle sobre a origem, a aparência e o comportamento da imagem, selecione o botão Imagem . Navegue até o arquivo de imagem em uma pasta local ou insira sua URL. Se a imagem estiver armazenada em um servidor externo, insira o caminho absoluto. Se ela estiver em um servidor local, insira um caminho relativo. Opcionalmente, insira uma altura e largura específicas para redimensionar a imagem e selecione um alinhamento. Você também deve inserir texto alt para descrever a imagem para pessoas que usam leitores de tela.<br/><br/>Se a imagem também for um link para uma página da Web ou outro recurso de nuvem, insira a URL do recurso na caixa URL de Destino e, se necessário, selecione o Destino onde o link deve ser aberto.
Esquerda para Direita. Direção do texto da esquerda para direita Altere o texto da esquerda para direita. Esta é a configuração padrão.
Direita para Esquerda. Direção do texto da direita para esquerda Altere o texto da direita para a esquerda para conteúdo de idioma bidirecional.
Desfazer. Desfazer Reverta a última alteração feita no conteúdo.
Limpar Toda Formatação. Remover Formatação Remova toda a formatação do texto selecionado.
Tabela. Tabela Insira uma tabela com o número de linhas e colunas que você selecionar. Para ter mais controle sobre o tamanho e a aparência da tabela, selecione o botão Tabela>Mais e altere suas propriedades. Você também pode clicar com o botão direito do mouse em uma tabela para exibir e alterar suas propriedades.<br/><br/>Para alterar a largura de uma coluna, arraste sua borda. Você pode selecionar uma ou mais células, linhas ou colunas e aplicar formatação específica um link ao texto selecionado e cortar, copiar e colar linhas ou colunas inteiras.
Configurações de personalização. Configurações de Personalização Defina sua fonte e tamanho de fonte padrão.
Configurações de acessibilidade. Configurações de acessibilidade Alt+0 Abra a ajuda de acessibilidade e a lista de atalhos de teclado do editor de rich text.
Expandir Barra de ferramentas. Expandir Barra de Ferramentas Quando a janela for muito estreita para mostrar toda a barra de ferramentas, selecione para expandir a barra de ferramentas para uma segunda linha.

> [! DICA] > Para usar o verificador ortográfico interno do navegador, pressione a tecla Ctrl enquanto clica com o botão direito do mouse no texto que deseja verificar. Caso contrário, o menu exibido ao clicar com o botão direito fornece formatação contextual para o elemento que você selecionar.
>Uma alternativa ao verificador ortográfico interno do navegador é a extensão do navegador Editor Microsoft. Editor Microsoft integra-se perfeitamente com o controle do editor de rich text e, quando habilitado, fornece recursos rápidos e fáceis de verificação gramatical e ortográfica diretamente no texto.

Use o editor de rich text offline

O controle Editor de rich text está disponível quando você trabalha offline, embora sem alguns dos recursos e funcionalidades com os quais você está acostumado. As imagens que você carrega usando a configuração padrão do editor não ficam disponíveis quando você trabalha offline.

Os plug-ins a seguir estão disponíveis para o editor de rich text no modo 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

As ferramentas de formatação a seguir estão disponíveis no editor de rich text no modo offline:

  • Negrito, itálico, sublinhado, listas com marcadores e numeradas, diminuir e aumentar recuo, bloquear citação, alinhar à esquerda, alinhar ao centro, alinhar à direita, tachado, texto bidirecional, desfazer e refazer e remover formatação

Melhores práticas para usar o editor de rich-text

  • Os campos de rich text armazenam marcas HTML para a formatação juntamente com os dados inseridos pelo usuário. Ao definir o tamanho máximo dos campos de rich-text, certifique-se de permitir as marcas HTML e os dados do usuário.

  • Para obter o melhor desempenho, mantenha o conteúdo HTML em 1 MB ou menos. Em tamanhos maiores, você pode notar tempos de resposta mais lentos para carregamento e edição.

  • Na configuração padrão, as imagens não afetam negativamente o desempenho porque são armazenadas separadamente do conteúdo HTML. No entanto, as imagens são armazenadas como conteúdo em Base64 na coluna de texto quando o usuário que as carrega não tem permissões na tabela msdyn_richtextfiles. O conteúdo em Base64 é grande, então geralmente não convém armazenar imagens como parte do conteúdo da coluna.

  • Se você tiver um direito de acesso de administrador do sistema ou usuário básico, o recurso de personalização do usuário funcionará por padrão. Se não tiver essas funções, você deverá ter privilégios para criar, ler e gravar na tabela msdyn_customcontrolextendedsettings para que o plug-in de personalização de usuário funcione.

  • Na configuração padrão do editor de rich text, se você arrastar e soltar um arquivo de imagem no editor de rich text, ele carrega a imagem em linha na tabela msdyn_richtextfiles. Para que os usuários apropriados possam exibir a imagem em linha, certifique-se de aplicar as permissões corretas para msdyn_richtextfiles.

Limitações do editor de rich text

Ao usar o editor de rich text, considere as limitações listadas nesta seção. Para obter perguntas sobre a disponibilidade do recurso, entre em contato com Microsoft Atendimento ao Cliente.

> [! IMPORTANTE] > O editor de rich text moderno é uma nova experiência. Para que a funcionalidade funcione corretamente, você deve remover a versão clássica. Do contrário, seus modelos podem não ser exibidos corretamente.

As limitações do editor rich text incluem o seguinte:

  • Você não pode usar o conteúdo do editor de rich text de fontes externas como Microsoft Word, Excel e assim por diante.
  • O editor de rich text dá suporte aos seguintes tipos de arquivo para anexos: .aac, .avi, .csv, .doc, .docx, .gif, .html, .jpeg, .mid, .midi, .mp3, .mp4, .mpeg, .msg, .pdf, .png, .ppt, .pptx, .svg, .txt, .vsd, .wav, .xls, .xlsm e .xlsx. Você pode configurar as extensões permitidas para seu ambiente em suas configurações avançadas acessando Administração>Geral>Definir extensões de arquivo bloqueadas para anexos e removendo as extensões que deseja permitir.
  • O editor de rich text não dá suporte a plug-ins não Microsoft.
  • As propriedades imageEntity de armazenamento personalizado e attachmentEntity que permitem usar uma tabela diferente com a versão avançada clássica do editor de rich text não funcionam com o editor de rich text moderno.

Modelos e assinaturas de email:

  • Se você tiver um problema com a maneira como um modelo de email é renderizado, recomendamos recriá-lo no editor moderno.
  • Estruturas HTML aninhadas, como elementos <div> ou <table> profundamente aninhados, podem causar problemas de renderização no editor de texto rico. Simplifique a estrutura HTML removendo tags
    ou aninhadas desnecessárias para garantir uma renderização consistente em diferentes clientes.

    Marcas HTML

    As marcas HTML a seguir não têm mais suporte ou são substituídas por uma alternativa moderna no editor de rich text.

    Etiqueta Description Alternativa moderna para editor de texto rico
    Define um acrônimo
    < applet> Incorpora o applet Java <object>
    Define o tamanho e a cor da fonte padrão CSS
    <big> Amplia o texto Tamanho da fonte do CSS
    Faz o texto piscar Animações CSS
    <center> Centraliza conteúdo Alinhamento de texto do CSS
    < dir> Lista de diretórios < ul>
    < font> Fontes de estilo CSS
    Define uma estrutura < iframe>
    < conjunto de quadros> Quadros agrupados < iframe>
    <isindex> Entrada de linha única
    Texto rolante Animações CSS
    Lista de menus < ul>
    Fallback para a ausência de suporte a quadros Não é necessário
    < texto sem formatação> Exibe texto sem formatação
    <s> Texto tachado , CSS
    <strike> Texto tachado ,
    <tt> Texto de teletipo , CSS
    <u> Texto sublinhado Decoração de texto do CSS
    < xmp> Texto pré-formatado

    Atributos HTML

    Os atributos HTML a seguir não têm mais suporte ou são substituídos por uma alternativa moderna no editor de rich text.

    Atributo Etiquetas afetadas Alternativa moderna para editor de texto rico
    alinhar Muitos Text-align do CSS, float
    alink, vlink, link CSS :link, :visited
    em segundo plano <body>, <table> Imagem de plano de fundo do CSS
    bgcolor Muitos Cor da tela de fundo do CSS
    borda ,
    altura, largura , Altura do CSS, largura do CSS
    hspace, vspace < img>
    linguagem