RichEdit

O RichEdit componente é um editor de texto enriquecido para colunas de texto multilinha do Dataverse. Ele oferece a formatação que o próprio editor de texto enriquecido da Dynamics oferece — fontes e tamanhos, cores, listas, indents, alinhamento, links, imagens e tabelas — e escreve da mesma forma que a Dynamics escreve, de modo que um documento editado no seu portal e em um aplicativo orientado a modelos seja igual em ambos. Ele é desenhado com os próprios controles da Fluent UI e segue seu tema.

React Blazor

Colunas em texto enriquecido

Uma coluna cujo formato no Dataverse é texto enriquecido não precisa de nada extra: ColumnEdit renderiza um RichEdit para ela, com seu rótulo, limite de comprimento, nível exigido e permissões retiradas da coluna, como qualquer outro editor.

React Blazor

Qualquer coluna de texto com múltiplas linhas

Use RichEdit diretamente para editar qualquer outra coluna de texto de várias linhas como texto enriquecido. Seu valor é então o HTML do documento. Grades e exportações mostram o texto dessa coluna sem sua formatação.

React Blazor

Imagens

Imagens podem ser inseridas da barra de ferramentas, coladas ou descartadas. Elas são armazenadas como o Dynamics as armazena, em msdyn_richtextfile registros, quando o usuário pode criá-los e ler — conceda permissões na sua tabela. Sem essa permissão, uma imagem é mantida no próprio documento. Configurado AllowImages para false desligar imagens.

React Blazor

Barra de ferramentas condensada

Defina ToolbarMode para Condensed um editor com pouco espaço, ou para texto curto como uma nota: a barra de ferramentas então mostra apenas a formatação mais usada — desfazer e refazer, negrito, itálico, sublinhado, riscado, destaque e cores do texto, listas com marcadores e numeradas, e links — e um botão no final que abre para cada dois botões e fecha novamente. Nomeie outros botões com CondensedToolbarButtons (Reagir: condensedToolbarButtons), uma lista de RichEditToolbarButton valores: a barra de ferramentas mostra esses botões, na ordem em que a barra de ferramentas completa os desenha. Limite a própria barra de ferramentas, completa ou condensada, aos botões nomeados em ToolbarButtons (Reagir: toolbarButtons); ela limita os botões, não a formatação, então atalhos de teclado e texto colado ainda formatam. Defina DisplayToolbar para false não mostrar nenhuma barra de ferramenta.

React Blazor
React Blazor
React Blazor

Tema

A borda, barra de ferramentas e indicador de foco do editor usam os tokens de design do Fluent UI, então eles combinam com os outros editores em temas claros e escuros e com a cor de destaque. A formatação própria de um documento — suas fontes e cores — é mostrada como escrita, conforme o Dynamics mostra.

Exemplo

Um RichEdit encadernado em uma coluna de texto enriquecido, aberto em um documento de exemplo.

Exemplo de reação Exemplo de Blazor React TypeScript Razor

Opções de configuração

Use os controles abaixo para explorar as propriedades disponíveis.

Exemplo de reação Exemplo de Blazor React TypeScript Razor
DesfazerRefazerFormatação de cópiasFonteTamanho da fonteOusadoItálicoSublinhadoRiscarCor das luzesCor do textoLista com tópicosLista numeradaDiminuir o recuoAumentar o recuoCitação em blocoAlinhar à esquerdaAlinhar centroAlinhar à direitaLinkRemover linkÍndiceÍndiceInserir imagemDa esquerda para a direitaDa direita para a esquerdaRemover formataçãoInserir tabela
React Blazor

RichEdit Classe

Parâmetros

Nome
Tipo
Padrão
Descrição
AllowImagesbool
True
Se as imagens podem ser inseridas — da barra de ferramentas, coladas ou soltas. Padrão para true.
AutoFitHeightbool
False
Se a área de edição se encaixa no conteúdo — de uma linha até RichEdit.Rows, então rolando — em vez de sempre ter RichEdit.Rows linhas de altura. Padrão para false.
ChildContentRenderFragment?
Conteúdo filho do componente
ColumnName*string
Nome lógico da coluna para vincular o editor a partir do registro da tabela.
CondensedToolbarButtonsIReadOnlyCollection<RichEditToolbarButton>?
Os botões que uma barra de ferramentas condensada mostra (RichEditToolbarMode.Condensed), desenhados em a ordem em que a barra de ferramentas completa os desenha, seja qual for a ordem em que sejam nomeados; o botão no final Ainda abre para o restante de RichEdit.ToolbarButtons. Não está definido ou vazio, o formatação mais usada (RichEdit.DefaultCondensedToolbarButtons): desfazer e refazer, negrito, itálico, sublinhado, riscado, cores de destaque e texto, listas com marcadores e numeradas, e Links.
Descriptionstring?
Descrição será exibida na dica de ferramenta.
Disabledbool?
Caso o editor esteja desativado.
DisplayLabelWhenAvailablebool
True
Especifica se deve exibir uma lable, se disponível.
DisplayToolbarbool
True
Se a barra de ferramentas de formatação é mostrada. Padrão para true.
DisplayTooltipWhenAvailablebool
True
Especifica se deve exibir uma dica de ferramenta, se disponível.
DisplayValidationErrorMessagebool
True
Uma mensagem de erro de validação deve ser exibida quando o componente falha na validação?
IsVisiblebool
True
O editor é visível?
Labelstring?
Texto para ser exibido como um rótulo para o editor.
LabelPositionEditorLabelPosition?
Onde o rótulo fica em relação ao controle. Quando null (o padrão) o editor assume a posição definida na SectionColumn mais próxima que envolve a SectionColumn, Section ou PageLayout, e EditorLabelPosition.Auto quando não existe um configura.
MaxLengthint?
Comprimento máximo do valor armazenado, formatação incluída: o que a coluna contém. Resolvido a partir dos metadados da coluna quando não está definido.
MinLengthint?
Número mínimo de caracteres de texto — o texto, não sua formatação.
Placeholderstring?
Mostrado no editor enquanto está vazio.
ReadOnlybool?
O editor deve ser somente leitura.
Requiredbool?
Se o valor for necessário.
Rowsint
10
Altura da área de edição em linhas de texto, quanto o documento preenche; mais longo Rolagem de conteúdo. Com RichEdit.AutoFitHeight, o máximo que cresce para. Padrão é 10.
ToolbarButtonsIReadOnlyCollection<RichEditToolbarButton>?
Os únicos botões que a barra de ferramentas mostra, cheios ou condensados, são desenhados na ordem da barra de ferramentas completa os desenha. Uma barra de ferramentas condensada mostra aqueles RichEdit.CondensedToolbarButtons que são aqui, e se abre para o resto destes; sem nenhum para mostrar, não tem botão para abri-lo fora. Limita os botões, não a formatação: atalhos de teclado e texto colado ainda formatar. Não está definido ou vazio, todos os botões são mostrados.
ToolbarModeRichEditToolbarMode
Full
Quanto da barra de ferramentas é mostrado: cada botão, ou a formatação mais usada com um botão que mostra o restante (RichEditToolbarMode.Condensed). Define para RichEditToolbarMode.Full.
Valuestring?
Recebe ou define o valor do editor: o HTML da coluna.
Nome: AllowImages
Tipo: bool
Padrão: True
Descrição: Se as imagens podem ser inseridas — da barra de ferramentas, coladas ou soltas. Padrão para true.
Nome: AutoFitHeight
Tipo: bool
Padrão: False
Descrição: Se a área de edição se encaixa no conteúdo — de uma linha até RichEdit.Rows, então rolando — em vez de sempre ter RichEdit.Rows linhas de altura. Padrão para false.
Nome: ChildContent
Tipo: RenderFragment?
Descrição: Conteúdo filho do componente
Nome: ColumnName*
Tipo: string
Descrição: Nome lógico da coluna para vincular o editor a partir do registro da tabela.
Nome: CondensedToolbarButtons
Tipo: IReadOnlyCollection<RichEditToolbarButton>?
Descrição: Os botões que uma barra de ferramentas condensada mostra (RichEditToolbarMode.Condensed), desenhados em a ordem em que a barra de ferramentas completa os desenha, seja qual for a ordem em que sejam nomeados; o botão no final Ainda abre para o restante de RichEdit.ToolbarButtons. Não está definido ou vazio, o formatação mais usada (RichEdit.DefaultCondensedToolbarButtons): desfazer e refazer, negrito, itálico, sublinhado, riscado, cores de destaque e texto, listas com marcadores e numeradas, e Links.
Nome: Description
Tipo: string?
Descrição: Descrição será exibida na dica de ferramenta.
Nome: Disabled
Tipo: bool?
Descrição: Caso o editor esteja desativado.
Nome: DisplayLabelWhenAvailable
Tipo: bool
Padrão: True
Descrição: Especifica se deve exibir uma lable, se disponível.
Nome: DisplayToolbar
Tipo: bool
Padrão: True
Descrição: Se a barra de ferramentas de formatação é mostrada. Padrão para true.
Nome: DisplayTooltipWhenAvailable
Tipo: bool
Padrão: True
Descrição: Especifica se deve exibir uma dica de ferramenta, se disponível.
Nome: DisplayValidationErrorMessage
Tipo: bool
Padrão: True
Descrição: Uma mensagem de erro de validação deve ser exibida quando o componente falha na validação?
Nome: IsVisible
Tipo: bool
Padrão: True
Descrição: O editor é visível?
Nome: Label
Tipo: string?
Descrição: Texto para ser exibido como um rótulo para o editor.
Nome: LabelPosition
Tipo: EditorLabelPosition?
Descrição: Onde o rótulo fica em relação ao controle. Quando null (o padrão) o editor assume a posição definida na SectionColumn mais próxima que envolve a SectionColumn, Section ou PageLayout, e EditorLabelPosition.Auto quando não existe um configura.
Nome: MaxLength
Tipo: int?
Descrição: Comprimento máximo do valor armazenado, formatação incluída: o que a coluna contém. Resolvido a partir dos metadados da coluna quando não está definido.
Nome: MinLength
Tipo: int?
Descrição: Número mínimo de caracteres de texto — o texto, não sua formatação.
Nome: Placeholder
Tipo: string?
Descrição: Mostrado no editor enquanto está vazio.
Nome: ReadOnly
Tipo: bool?
Descrição: O editor deve ser somente leitura.
Nome: Required
Tipo: bool?
Descrição: Se o valor for necessário.
Nome: Rows
Tipo: int
Padrão: 10
Descrição: Altura da área de edição em linhas de texto, quanto o documento preenche; mais longo Rolagem de conteúdo. Com RichEdit.AutoFitHeight, o máximo que cresce para. Padrão é 10.
Nome: ToolbarButtons
Tipo: IReadOnlyCollection<RichEditToolbarButton>?
Descrição: Os únicos botões que a barra de ferramentas mostra, cheios ou condensados, são desenhados na ordem da barra de ferramentas completa os desenha. Uma barra de ferramentas condensada mostra aqueles RichEdit.CondensedToolbarButtons que são aqui, e se abre para o resto destes; sem nenhum para mostrar, não tem botão para abri-lo fora. Limita os botões, não a formatação: atalhos de teclado e texto colado ainda formatar. Não está definido ou vazio, todos os botões são mostrados.
Nome: ToolbarMode
Tipo: RichEditToolbarMode
Padrão: Full
Descrição: Quanto da barra de ferramentas é mostrado: cada botão, ou a formatação mais usada com um botão que mostra o restante (RichEditToolbarMode.Condensed). Define para RichEditToolbarMode.Full.
Nome: Value
Tipo: string?
Descrição: Recebe ou define o valor do editor: o HTML da coluna.

Eventos

Nome
Tipo
Descrição
ValueChangedEventCallback<ColumnValueBase>
Recebe ou define um callback que atualiza o valor vinculado.
Nome: ValueChanged
Tipo: EventCallback<ColumnValueBase>
Descrição: Recebe ou define um callback que atualiza o valor vinculado.

Métodos

Nome
Parâmetros
Tipo
Descrição
FocusAsyncTask
Coloca o cursor no editor.
GetValidationErrorsList<string>
Retorna erros de validação para o valor atual: o mínimo conta o texto, o máximo conta o que está armazenado.
OnImageErrorstring fileName
string reason
void
JS → C#: uma imagem escolhida pelo usuário não pôde ser inserida. Disse no editor.
OnStateChangedJsonElement state
void
JS → C#: o que a barra de ferramentas mostra mudou — a seleção foi movida ou a formatação mudou.
OnValueChangedstring value
Task
JS → C#: o documento mudou. Carrega o valor a armazenar, ou nulo quando vazio.
UploadImageAsyncIJSStreamReference image
string fileName
long size
Task<string>
JS → C#: armazena uma imagem que o usuário inseriu como um registro msdyn_richtextfile e retorna seu id — ou null quando o usuário pode não criar um ou relê-lo, e o a imagem é mantida no documento em vez disso.
Nome: FocusAsync
Tipo: Task
Descrição: Coloca o cursor no editor.
Nome: GetValidationErrors
Tipo: List<string>
Descrição: Retorna erros de validação para o valor atual: o mínimo conta o texto, o máximo conta o que está armazenado.
Nome: OnImageError
Parâmetros: string fileName
string reason
Tipo: void
Descrição: JS → C#: uma imagem escolhida pelo usuário não pôde ser inserida. Disse no editor.
Nome: OnStateChanged
Parâmetros: JsonElement state
Tipo: void
Descrição: JS → C#: o que a barra de ferramentas mostra mudou — a seleção foi movida ou a formatação mudou.
Nome: OnValueChanged
Parâmetros: string value
Tipo: Task
Descrição: JS → C#: o documento mudou. Carrega o valor a armazenar, ou nulo quando vazio.
Nome: UploadImageAsync
Parâmetros: IJSStreamReference image
string fileName
long size
Tipo: Task<string>
Descrição: JS → C#: armazena uma imagem que o usuário inseriu como um registro msdyn_richtextfile e retorna seu id — ou null quando o usuário pode não criar um ou relê-lo, e o a imagem é mantida no documento em vez disso.