Inicio rápido

1. Consigue el editor

Tres caminos. El CDN no necesita ninguna instalación y es la forma más rápida de ver el editor en funcionamiento; los otros dos son los que se usan en los despliegues de producción.

Opción A: descarga el paquete con licencia

Ve a /download y descarga el paquete de tu framework. Descomprímelo en tu sitio para que el editor quede en /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

Opción 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

Después importa los estilos y el bundle desde tu proceso de compilación:

// 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";

Opción C: CDN, sin nada que instalar

jsDelivr y unpkg replican el paquete de npm publicado, así que un editor que funciona son dos etiquetas en un archivo HTML vacío: sin descarga, sin paso de compilación y sin cuenta. Pega esto en un CodePen y 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>

Eso te da el editor principal y su barra de herramientas. Añade una etiqueta más para el conjunto completo de plugins (AI Toolkit, comentarios, comandos de barra, menciones, tablas de diseño y el resto):

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

Una línea opcional. La superficie de edición pide su hoja de estilos del contenido en /richtexteditor/runtime/richtexteditor_content.css en tu origen, que una página solo con CDN no tiene, así que verás un 404 en el panel de red. No se rompe nada (el editor lleva los mismos valores predeterminados en línea y la superficie tiene estilo en cualquier caso), pero puedes apuntarlo a la copia del CDN y la solicitud desaparece:

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

Fija la versión. Todas las rutas de arriba indican @2.16.0 a propósito: una URL con versión fija es inmutable y se almacena en caché durante un año, así que tu página no puede cambiar sin que lo sepas. @2 se resuelve a la versión 2.x más reciente, algo útil durante la evaluación y poco prudente en producción. Cambia el host por https://unpkg.com/ y las mismas rutas funcionan allí.

O sírvelo desde nuestro dominio. Los mismos archivos están publicados en cdn.richtexteditor.com: byte a byte la misma compilación que usa este sitio, en caché en el borde de Cloudflare, sin ningún tercero entre tú y nosotros:

<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>

La contrapartida es la fijación de la versión, y funciona al revés. Estas rutas no llevan versión, así que siempre sirven la versión actual y no puedes mantener una página en una más antigua; se indica a los navegadores que vuelvan a comprobar cada cuatro horas. Las URL de jsDelivr de arriba son inmutables para cada versión, que es lo que quieres para una compilación que necesites reproducir dentro de unos meses. Usa cdn.richtexteditor.com cuando prefieras no añadir un tercero a tu página, y las URL de jsDelivr con versión fija cuando necesites dejar la versión bien atada.

Dos cosas que conviene saber antes de publicarlo. El CDN es un tercero que sirve tu página: cómodo para pruebas, prototipos e informes de errores, pero las rutas autoalojadas de arriba son las que mantienen el editor por completo dentro de tu propia infraestructura, que es la razón de ser de una licencia perpetua. Y un CDN cambia cómo llegan los archivos al navegador, no lo que tu licencia te permite hacer con ellos; consulta /license.

2. Añade el script y crea tu primer 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>

Ya tienes un editor que funciona con la barra de herramientas predeterminada. Ábrelo en un navegador y empieza a escribir.

3. Personaliza la barra de herramientas

Pasa un objeto de configuración 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 una barra de herramientas personalizada con grupos explícitos:

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

Consulta la referencia de elementos de la barra de herramientas y los menús para ver todos los nombres de comando.

4. Lee y escribe el contenido

// 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. Envía el contenido con un formulario

Si tu editor está dentro de un <form>, RichTextEditor escribe automáticamente el HTML del editor en un campo oculto que replica el id del contenedor del editor. En el servidor, lo lees de la solicitud como cualquier otro campo del formulario. Para envíos dinámicos, llama a editor.getHTMLCode() desde tu controlador de envío:

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

6. Elige tu siguiente paso