Importar estilos

Rellena los menús de estilos del editor con las clases CSS que ya tiene tu sitio. Con importStyles: true, el editor lee las hojas de estilos de la página, encuentra selectores de clase como p.lede o img.roundedy añade cada clase al menú de estilos de párrafo, en línea, imagen o enlace, para que los autores elijan las clases de tu sistema de diseño en lugar de las de ejemplo.

Cómo activarlo

Esta función la ofrece el plugin importstyles.js (también incluido en plugins/all_plugins.js). Está desactivado hasta que configures importStyles: true. No tiene botón propio; rellena los menús de paragraphstyle y inlinestyle (barra principal), imagestyle (barra de imágenes) y linkstyle (barra de enlaces).

La hoja de estilos de este ejemplo:

p.lede { font-size: 1.25em; color: #334155; }
blockquote.pull-quote { border-left: 4px solid #2563eb; padding-left: 12px; font-style: italic; }
span.badge { background: #fde68a; padding: 0 4px; border-radius: 4px; }
.highlight { background: #dcfce7; }
img.rounded { border-radius: 12px; }
a.cta { background: #2563eb; color: #fff; padding: 4px 10px; border-radius: 6px; }
article .card p.note:hover { color: #0f766e; }
p.lede.wide { max-width: none; }
.js-toggle { display: none; }
@media (min-width: 600px) { h2.section-title { letter-spacing: .02em; } }

<link rel="stylesheet" href="site.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Intro paragraph that should become a lede.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  contentCssUrl: "site.css",   // so the classes also look right inside the editor
  importStyles: true
});
</script>

Esa hoja de estilos produjo estos menús (editor.getImportedStyles() informó applied: { imageStyles: 1, linkStyles: 1, inlineStyles: 2, paragraphStyles: 5 }):

Menú	Entradas importadas
Estilos de párrafo	Lede, Pull Quote, Highlight, Note, Section Title
Estilos en línea	Badge, Highlight
Estilos de imagen	Rounded
Estilos de enlace	Cta

Al seleccionar Lede en el primer párrafo se guardó <p class="lede">Intro paragraph that should become a lede.</p>.

Cómo se clasifican las clases

• Solo cuenta la última parte de un selector: article .card p.note:hover produce note para párrafos. Se ignoran las pseudoclases y los filtros de atributos.
• El elemento que precede a la clase determina el menú: img, figure, picture van a los estilos de imagen; a a los estilos de enlace; span, strong, b, em, i, code, mark, small, sub, sup, abbr, q, cite a los estilos en línea; p, div, los encabezados, blockquote, las listas, pre, las secciones y las celdas de tabla, a los estilos de párrafo. Una clase sin elemento (.highlight) va tanto a los estilos en línea como a los de párrafo. Los demás elementos se omiten.
• Un selector con dos clases en un elemento (p.lede.wide) se omite, ya que ninguna clase por sí sola coincide con él.
• Se detectan las clases dentro de @media y @supports .
• La etiqueta se genera a partir del nombre de la clase: pull-quote se convierte en "Pull Quote". Se elimina el prefijo my-cls-, u- o c- .
• Nunca se leen las hojas de estilos del propio editor (todo lo que procede de la carpeta /richtexteditor/ y los estilos que inyecta el editor).

Opciones

Opción	Valor predeterminado	Función
importStyles	false	Activa la importación.
importStylesSheets	null (todas las hojas legibles)	Qué hojas leer: una cadena que se compara con la URL de la hoja ("site.css"), una RegExp (/theme/) o una función que recibe el CSSStyleSheet y devuelve true o false.
importStylesExclude	/^(rte[-_]|ck[-_]|cke[-_]|mce[-_]|tox[-_]|js[-_]|is[-_]|has[-_])/i	Nombres de clase que nunca se importan. Una RegExp, una función que recibe el nombre de la clase o un prefijo de cadena. El valor predeterminado omitió .js-toggle en el ejemplo anterior.
importStylesFilter	null	function (className, selectorText, menu). Devuelve false para omitir una clase o una cadena para usarla como etiqueta. menu es "paragraphStyles", "inlineStyles", "imageStyles" o "linkStyles".
importStylesReplace	false	false añade las clases importadas después de las configuradas; true las sustituye.
importStylesLimit	100	Número máximo de entradas por menú. Las clases adicionales se descartan con una advertencia en la consola. 0 significa sin límite.

Por ejemplo, para ocultar una clase y cambiar el nombre de otra:

importStylesFilter: function (cls, selector, menu) {
  if (cls === "highlight") return false;
  if (cls === "lede") return "Lead paragraph";
}

API

• editor.getImportedStyles() devuelve el resultado de la última importación: { applied, truncated, droppedCount, unreadableSheets, documentsScanned, replaced }.
• editor.scanStylesheetClasses(options) enumera lo que se importaría, como { classes: [{ cls, tag, selector }], unreadableSheets, documents }, sin modificar los menús. Funciona con importStyles desactivado.
• editor.importStyles(options) vuelve a ejecutar la importación, por ejemplo, después de cargar otra hoja de estilos. Las opciones usan los nombres cortos: { sheets, exclude, filter, replace, limit }.

Aspectos a tener en cuenta

• No se pueden leer las hojas de estilos de otro origen. El navegador bloquea sus reglas; se cuentan en unreadableSheets y se omiten, y el resto del análisis continúa. En la prueba anterior, una copia de la misma hoja de estilos cargada desde un segundo origen se notificó como unreadableSheets: 1. Sirve la hoja cuyas clases quieras usar desde tu propio dominio.
• Se leen ambos documentos: la página y el área de edición del editor (donde se carga contentCssUrl ). La importación se ejecuta cuando se inicia el editor y de nuevo cuando está listo.
• Pasa tus propias listas cuando la página tenga varios editores. En 2.6.12, con importStylesReplace: false, las clases importadas se añaden a las listas predeterminadas compartidas (RTE_DefaultConfig.paragraphStyles y las demás), por lo que un segundo editor creado después en la misma página las muestra incluso con importStyles desactivado. Configurar paragraphStyles, inlineStyles, imageStyles y linkStyles en cada editor, o importStylesReplace: true, mantiene las listas separadas.
• El HTML guardado solo contiene el nombre de la clase (class="lede"). La página que muestra el contenido necesita la misma hoja de estilos y un sanitizador HTML debe permitir class.
• En una página con CSS de utilidades (cientos de clases con un único propósito), limita la importación con importStylesSheets o importStylesFilter en lugar de aumentar el límite.

Relacionado: demo de estilos de párrafo y en línea, referencia de configuración.