Documentação

Instale o editor, configure-o e controle-o pelo seu código. 108 guias e páginas de referência.

Comece aqui

Início rápido

Coloque o RichTextEditor 2.6.12 para funcionar: escolha uma forma de configuração, crie o seu primeiro editor, leia e salve o HTML e resolva problemas comuns de configuração.

Referência de configuração

Todas as opções de configuração do RichTextEditor: configurações do core do editor, tipografia inteligente, segurança de iframes e mais de 100 opções de plugins para IA, exportação, paginação, acessibilidade e segurança do conteúdo.

Todos os métodos

Referência completa dos métodos da API JavaScript das instâncias do RichTextEditor: conteúdo, seleção, comandos, caixas de diálogo e ciclo de vida.

AI Toolkit

Referência do AI Toolkit: a caixa de diálogo Ask AI, AI Chat, AI Review, o hook aiToolkitResolver, o contrato de operações, ações personalizadas e BYOK.

Comece agora

Como instalar, preparar e configurar o editor.

Início rápido

Coloque o RichTextEditor 2.6.12 para funcionar: escolha uma forma de configuração, crie o seu primeiro editor, leia e salve o HTML e resolva problemas comuns de configuração.

Instalação (div)

Instale o RichTextEditor em um elemento div: inclua o rte.js, crie a instância e leia ou defina o conteúdo HTML a partir dos seus próprios scripts.

Instalação (textarea)

Instale o RichTextEditor em um textarea: o editor sincroniza o HTML com o campo do formulário automaticamente, e os envios de formulário existentes continuam funcionando.

Inicialização

RichTextEditor JavaScript global enables you to create, modify and interact with instances of the editor. This is the starting point for any integration.

Configuração

O RichTextEditor pode ser configurado de várias formas para se adequar à sua experiência de edição.

Referência de configuração

Todas as opções de configuração do RichTextEditor: configurações do core do editor, tipografia inteligente, segurança de iframes e mais de 100 opções de plugins para IA, exportação, paginação, acessibilidade e segurança do conteúdo.

Skin

Configuração de skin e tema: troque a skin da barra de ferramentas, sobrescreva variáveis CSS e reestilize a interface do editor para combinar com o seu produto.

Definir e obter conteúdo

As formas comuns de definir e ler o conteúdo HTML do RichTextEditor com JavaScript, incluindo a leitura antes do envio de um formulário.

Estado no React e problemas de cursor

Escolha entre estado controlado ou não controlado do RichTextEditor no React. Salve o HTML atual, evite respostas desatualizadas do salvamento automático e diagnostique saltos do cursor, remontagens e a limpeza do Strict Mode.

Validação de formulários e campos obrigatórios

Valide um campo obrigatório do RichTextEditor sem contar HTML vazio como conteúdo. Sincronize o textarea, mostre erros acessíveis e repita a validação no servidor.

Perguntas frequentes

Respostas para perguntas comuns sobre integração, configuração, licenciamento, compatibilidade com navegadores e solução de problemas do RichTextEditor.

IA

Ferramentas de escrita com IA e como conectar o seu próprio provedor.

AI Toolkit

Referência do AI Toolkit: a caixa de diálogo Ask AI, AI Chat, AI Review, o hook aiToolkitResolver, o contrato de operações, ações personalizadas e BYOK.

Provedores de IA, streaming e DOCX

Resolvers de provedor incluídos para OpenAI / Anthropic / Azure OpenAI, streaming com Server-Sent Events e exportação DOCX no servidor.

Cofre de chaves BYOK (chaves por tenant)

Charge AI traffic to each tenant's own provider account via the IAiKeyVault abstraction, with reference implementations, admin REST API, and cost ledger.

Documentos e escrita

Exportação para Word, layout de página, conteúdo estruturado e entrada de dados.

Fidelidade e segurança do DOCX

A matriz de suporte testada de HTML para DOCX, o contrato da requisição, as convenções de marcação de revisão, o limite de segurança das imagens e os limites intencionais.

Paginação e numeração jurídica

Visualização paginada (A4, Letter e Legal, com cabeçalhos, rodapés e números de página) e numeração jurídica em vários níveis, na licença padrão.

Notas de rodapé, pincel de formatação e maiúsculas/minúsculas

Notas de rodapé numeradas automaticamente, um pincel de formatação que copia a formatação de caracteres e a alteração de maiúsculas e minúsculas (UPPER, lower, Title, Sentence) - licença padrão.

Conteúdo estruturado

Documentação do RichTextEditor sobre JSON estruturado, conversão para Markdown, renderização de HTML estático e validação.

Ditado

Conversão de fala em texto pela Web Speech API. Botão de microfone na barra de ferramentas, transcrições parciais em tempo real, ativação opcional.

Modo de barra de ferramentas para mobile

Folha de estilo opcional para mobile, com áreas de toque de 44x44, barra de ferramentas com rolagem horizontal, cabeçalho fixo e caixas de diálogo em painel inferior.

Colaboração

Comentários, alterações controladas e edição em tempo real.

Colaboração e revisão

Referência dos plugins de colaboração e revisão: Slash Commands, @Mentions, Track Changes, Comments, Revision History e presença com Yjs.

Engine CRDT Yjs por nó

Como textSync: 'crdt' funciona por dentro: o binding por nó, a codificação de awareness, o gerenciador de desfazer por autor e o dispatcher do rte.js.

Imagens e uploads

Envio, armazenamento e navegação de imagens e arquivos.

Upload de arquivos

Configure uploads de arquivos seguros no RichTextEditor com um handler personalizado, validação, callbacks de progresso e controles de armazenamento no servidor.

Caminho da galeria de imagens

Aponte a caixa de diálogo Insert Gallery para as suas próprias imagens: o contrato JSON das pastas, como uma pasta vira uma URL e o código do endpoint para ASP.NET, ASP.NET Core e PHP.

Armazenar imagens como arquivos

Configuração de imagens para produção: crie a pasta de upload e da galeria, conecte o handler de upload, desative a incorporação em base64, recuse base64 no servidor e transforme as imagens base64 existentes em arquivos. ASP.NET Core, ASP.NET e PHP.

Corrigir problemas de upload de imagens

Diagnostique passo a passo os uploads de imagens do RichTextEditor: requisições que não saem, erros 403 e 413, respostas inválidas, URLs de imagem quebradas e imagens perdidas depois de salvar.

Provedores de upload em nuvem

Send uploads to S3, Azure Blob, Cloudinary, or any custom backend via IRichTextBoxUploadStore. Reference implementations included.

Personalizar e estender

Barras de ferramentas, comandos, eventos e os seus próprios plugins.

Noções básicas da API

O editor expõe métodos no cliente para ler e atualizar o conteúdo.

Referência de itens da barra de ferramentas e do menu

Every toolbar and menu item identifier RichTextEditor supports, grouped by category, for building custom toolbars in config.toolbar strings.

Todos os comandos (execCommand)

Referência completa dos comandos de execCommand(): formatação, blocos, listas, tabelas, mídia e comandos de caixas de diálogo, com as assinaturas dos argumentos.

Todas as propriedades

As propriedades somente leitura de uma instância do RichTextEditor, para acessar os objetos relacionados ao editor a partir do seu próprio código. Com exemplos.

Todos os métodos

Referência completa dos métodos da API JavaScript das instâncias do RichTextEditor: conteúdo, seleção, comandos, caixas de diálogo e ciclo de vida.

Tratar eventos

Referência de runjsevent: conecte botões da barra de ferramentas aos seus próprios handlers JavaScript e reaja aos comandos do editor no código da aplicação.

Escreva seu primeiro plugin

Crie um plugin do RichTextEditor de ponta a ponta: registro, padrões de configuração, um botão na barra de ferramentas, um comando, o barramento de eventos e o efeito dele no conteúdo salvo.

Tamanho do bundle e seleção de plugins

Por padrão, todos os plugins vêm em all_plugins.min.js. Carregue só os plugins que você usa e o editor cai de 529 KB para 214 KB com gzip. Predefinições medidas para blog, documentos, revisão e colaboração, com as tags script de cada uma.

Recursos, um a um

O que cada recurso faz, como ativá-lo e as opções dele.

Seletor de emoji

Um seletor pesquisável com 1,037 emojis em oito categorias, com uma aba de usados recentemente e navegação pelo teclado. Os emojis são salvos como caracteres Unicode simples.

Preenchimento automático de emoji

Digite :smile: e receba o emoji, ou digite dois-pontos e algumas letras para escolher em uma lista. Cobre o mapa de shortcodes, como adicionar os seus próprios códigos e o desfazer.

Modelos de conteúdo

Ofereça documentos prontos em uma caixa de diálogo pesquisável com prévias ao vivo. Como definir htmlTemplates, as formas que eles aceitam e o que significa substituir o conteúdo.

Equações matemáticas

Insira equações TeX e LaTeX a partir de uma caixa de diálogo com prévia ao vivo. Como ele usa o KaTeX ou o MathJax da sua página, o que é salvo e como exibir.

Diagramas Mermaid

Desenhe fluxogramas e diagramas de sequência, de pizza e de Gantt a partir de texto Mermaid. Carregue o Mermaid ou renderize no seu servidor; o que é salvo e como exibir depois.

Cards de bookmark

Insira um link como um card de prévia com título, descrição, ícone e imagem. O editor não busca nada: conecte o bookmarkResolver ao seu próprio endpoint.

Incorporação automática

Cole um link do YouTube, do Vimeo, do Loom ou de outro vídeo em uma linha própria e tenha um player 16:9. Sites compatíveis, os seus próprios provedores e a marcação salva.

Smart chips

Chips inline de data, pessoa e link que armazenam um valor legível por máquina. Datas rápidas, sugestões do seu próprio chipResolver e a marcação salva.

Tabelas de layout

Marque com role=presentation as tabelas que só posicionam conteúdo, para que os leitores de tela ignorem a grade. Comandos, menu de barra, a API e o que muda.

@menções

Digite @ para escolher uma pessoa em uma lista estática ou na busca do seu próprio servidor. O chip armazena o id da pessoa no HTML, para que o seu servidor saiba quem foi mencionado.

Preenchimento com texto fantasma

Sugestões inline em cinza depois do cursor, vindas de uma função resolver escrita por você. Tab aceita, Esc descarta. Nenhum modelo vem incluído; chame o seu próprio endpoint de IA.

Código inline

Marque uma palavra ou uma seleção como código com o botão ou o comando inlinecode. Salva um elemento <code> simples; pressione o botão de novo para remover o código.

Recolher títulos

Recolha a seção abaixo de um título clicando na seta ao lado dele, ou por script. O recolhimento existe só na tela; o HTML salvo mantém todas as seções intactas.

Cursor de lacuna

Adicione um parágrafo antes de uma tabela inicial ou entre duas tabelas, linhas horizontais ou imagens, com uma tecla de seta, um clique na lacuna ou a linha azul de indicação entre os blocos.

Ordenação de tabelas e números de linha

Ordene as linhas de uma tabela por uma coluna, com detecção de números, valores monetários e datas, adicione uma coluna de números de linha que se renumera sozinha e mova linhas e colunas pelos menus.

Estatísticas de legibilidade

Flesch Reading Ease, nível escolar de Flesch-Kincaid, tempo de leitura e contagens de palavras, frases e sílabas, calculados no navegador. Exibidos em uma caixa de diálogo ou lidos por script.

Leitura em voz alta

Lê o documento ou a seleção em voz alta com a síntese de fala do navegador, frase por frase, com controles de reprodução, pausa, voz e velocidade em uma pequena barra.

Editor de imagens

Recorte, gire, espelhe, desenhe, adicione texto ou filtros a uma imagem do documento. Save envia um PNG pelo seu handler de upload, ou o incorpora como data URL.

Verificação ortográfica

Verificação ortográfica do navegador na área de edição, mais um comando Spell Check que mostra um painel de revisão com sugestões do seu próprio serviço de ortografia.

Idioma de trechos de texto

Marque uma palavra ou um trecho como francês, hebraico ou outro idioma com span lang, para que os leitores de tela o pronunciem corretamente (WCAG 3.1.2 Idioma das partes).

Interface da direita para a esquerda

Espelhe a barra de ferramentas, os menus, as caixas de diálogo e a barra de status do editor para usuários de árabe, hebraico, persa e urdu, automaticamente ou sempre. O conteúdo não é alterado.

Importar estilos

Preencha os menus de estilos de parágrafo, inline, de imagem e de link com as classes CSS das folhas de estilo do seu site, distribuídas pelo elemento de cada seletor.

HTML para e-mail

getEmailHTML() copia os estilos computados como inline, remove classes e ids e envolve o conteúdo em uma tabela de largura fixa, para que ele sobreviva aos clientes de e-mail.

Várias regiões editáveis

Agrupe vários editores, como título, resumo e corpo, para que só a região em uso mostre uma barra de ferramentas e uma única API salve e carregue todas as regiões juntas.

Shadow DOM

Execute o editor dentro de uma shadow root ou de um web component. O plugin copia as folhas de estilo do editor para a shadow root, incluindo as adicionadas depois.

Acessibilidade das caixas de diálogo

Dá às caixas de diálogo do editor o papel dialog, um nome a partir do título e nomes acessíveis para os campos, para que os leitores de tela anunciem URL em vez de edit.

Acessibilidade e operação

Conformidade com as WCAG e execução do editor em produção.

Acessibilidade (WCAG 2.2 AA)

Meta de conformidade com o nível AA das WCAG 2.2, o que funciona hoje, lacunas conhecidas e as combinações de tecnologias assistivas compatíveis com o RichTextEditor.

Regras do verificador de acessibilidade

Cada regra que o verificador de acessibilidade incluído aplica ao conteúdo do editor, o que cada uma detecta, quais têm correção com um clique e a API JavaScript para executá-lo você mesmo.

Operação em produção

Como executar o RichTextEditor e o RichTextBox.AspNetCore em produção: limite de taxa, novas tentativas HTTP, log de auditoria, health probes, idempotência e BYOK.

Referência de métodos

Todos os métodos do editor, uma página para cada.

Eventos

Os eventos que o editor dispara e como escutá-los.

Prefere ver funcionando?

Cada recurso desta documentação tem uma demonstração ao vivo que você pode editar e inspecionar.

Ver as demonstraçõesFale com o suporte