Início rápido

1. Obtenha o editor

Três caminhos. A CDN não exige nenhuma instalação e é a forma mais rápida de ver o editor funcionando; os outros dois são os usados em implantações de produção.

Opção A — Baixe o pacote licenciado

Acesse /download e baixe o pacote do seu framework. Descompacte-o no seu site para que o editor fique em /richtexteditor/:

your-site/
├── richtexteditor/
│   ├── rte.js                       ← protected production build (~410 KB)
│   ├── rte_theme_default.css
│   ├── plugins/
│   │   ├── all_plugins.js           ← AI Toolkit, comments, slash, mentions, etc.
│   │   ├── aitoolkit.css
│   │   ├── crdt-engine.min.js       ← Per-node Yjs CRDT (load only if you use collab)
│   │   └── ...
│   └── lang/                        ← optional translations
└── your-page.html

Opção B — npm (recomendado)

npm install @richscripts/richtexteditor

# or scaffold a complete working example app:
npm create @richscripts/richtexteditor my-app -- --react   # also: --vue, --angular, --svelte

Depois, importe os estilos e o pacote no seu pipeline de build:

// Side-effect import attaches `RichTextEditor` to `window`.
import "@richscripts/richtexteditor/richtexteditor/rte.js";
import "@richscripts/richtexteditor/richtexteditor/plugins/all_plugins.js";

// Or via the typed React wrapper (Vue / Angular wrappers shipped too):
import { RichTextEditorComponent } from "@richscripts/richtexteditor/react";

Opção C — CDN, sem nada para instalar

O jsDelivr e o unpkg espelham o pacote npm publicado, então um editor funcionando são duas tags em um arquivo HTML vazio — sem download, sem etapa de build, sem conta. Cole isto em um CodePen e ele funciona:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
  var editor1 = new RichTextEditor("#div_editor1");
</script>

Isso fornece o core do editor e a barra de ferramentas. Adicione mais uma tag para o conjunto completo de plugins — AI Toolkit, comentários, comandos de barra, menções, tabelas de layout e o restante:

<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/plugins/all_plugins.min.js"></script>

Uma linha opcional. A área de edição solicita sua folha de estilo de conteúdo em /richtexteditor/runtime/richtexteditor_content.css na sua origem, que uma página só com CDN não tem, então você verá um 404 no painel de rede. Nada quebra — o editor traz os mesmos padrões inline e a área recebe estilo de qualquer forma —, mas você pode apontá-la para a cópia na CDN e a requisição desaparece:

var editor1 = new RichTextEditor("#div_editor1", {
  contentCssUrl: "https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/runtime/richtexteditor_content.css"
});

Fixe a versão. Todos os caminhos acima indicam @2.16.0 de propósito: uma URL com versão fixa é imutável e fica em cache por um ano, então sua página não pode mudar sem você saber. @2 resolve para a release 2.x mais recente, o que é útil durante a avaliação e imprudente em produção. Troque o host por https://unpkg.com/ e os mesmos caminhos funcionam lá.

Ou sirva a partir do nosso domínio. Os mesmos arquivos são publicados em cdn.richtexteditor.com — byte a byte o mesmo build que este site usa, em cache no edge da Cloudflare, sem terceiros entre você e nós:

<link rel="stylesheet" href="https://cdn.richtexteditor.com/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.richtexteditor.com/richtexteditor/rte.js"></script>
<script src="https://cdn.richtexteditor.com/richtexteditor/plugins/all_plugins.min.js"></script>

A desvantagem é a fixação de versão, e ela funciona ao contrário. Esses caminhos não têm versão, então sempre servem a release atual e você não consegue manter uma página em uma versão anterior; os navegadores são instruídos a verificar de novo a cada quatro horas. As URLs do jsDelivr acima são imutáveis por versão, que é o que você quer para um build que precisa reproduzir daqui a meses. Use cdn.richtexteditor.com quando preferir não adicionar terceiros à sua página, e as URLs do jsDelivr com versão fixa quando precisar da versão bem definida.

Duas coisas que vale saber antes de publicar. A CDN é um terceiro servindo a sua página — prático para avaliações, protótipos e relatórios de bug, mas são os caminhos auto-hospedados acima que mantêm o editor inteiramente dentro da sua própria infraestrutura, que é o propósito de uma licença perpétua. E uma CDN muda a forma como os arquivos chegam ao navegador, não o que sua licença permite fazer com eles; veja /license.

2. Adicione o script e crie seu primeiro editor

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
    var editor = new RichTextEditor("#div_editor1");
</script>

Pronto: um editor funcionando com a barra de ferramentas padrão. Abra-o em um navegador e comece a digitar.

3. Personalize a barra de ferramentas

Passe um objeto de configuração como segundo argumento:

var editor = new RichTextEditor("#div_editor1", {
    toolbar:    "basic",      // "basic" | "full" | "mobile" | "custom"
    height:     "500px",
    showStatistics:  true,    // word / character count in the bottom bar
    showFloatTextToolBar: true
});

Para uma barra de ferramentas personalizada com grupos explícitos:

var editor = new RichTextEditor("#div_editor1", {
    toolbar: "custom",
    toolbar_custom:
        "{bold,italic,underline}|" +
        "{insertorderedlist,insertunorderedlist}|" +
        "{insertlink,insertimage}|" +
        "{aiassist,aichat}|" +
        "{undo,redo}"
});

Veja a referência de itens da barra de ferramentas e de menus para todos os nomes de comando.

4. Leia e grave o conteúdo

// Get the current HTML
var html = editor.getHTMLCode();

// Replace the editor's content
editor.setHTMLCode("<p>New content</p>");

// Get plain text (no markup)
var text = editor.getPlainText();

// Get a structured-content JSON document (lossless round-trip with setJSON())
var json = editor.getJSON();
editor.setJSON(json);

5. Envie o conteúdo com um formulário

Se o seu editor estiver dentro de um <form>, o RichTextEditor grava automaticamente o HTML do editor em um campo oculto que espelha o id do contêiner do editor. No servidor, você o lê da requisição como qualquer outro campo de formulário. Para envios dinâmicos, chame editor.getHTMLCode() no seu handler de envio:

document.getElementById("save").addEventListener("click", function () {
    fetch("/api/save", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify({ html: editor.getHTMLCode() })
    });
});

6. Escolha seu próximo passo