Tarjetas de enlaces

Inserta un enlace como una tarjeta de vista previa con un título, una descripción breve, el icono del sitio y una miniatura, como un enlace compartido en una aplicación de chat. El editor no obtiene datos por su cuenta: la tarjeta muestra lo que devuelve tu bookmarkResolver o solo el nombre del dominio si no tienes uno.

Cómo activarlo

Esta función la ofrece el plugin bookmarkcard.js (también incluido en plugins/all_plugins.js). El elemento de la barra de herramientas es insertbookmark (texto de ayuda "Bookmark"). La barra predeterminada lo incluye en el menú "More" (⋮); para usarlo en tu propia barra, añade insertbookmark. Para obtener tarjetas completas, proporciona un resolver que solicite a tu servidor los metadatos de la página:

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

<div id="div_editor1"><p>Start here:</p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertbookmark}|{undo,redo}",
  bookmarkResolver: function (url) {
    return fetch("/api/unfurl?url=" + encodeURIComponent(url))
      .then(function (r) { return r.json(); }); // { title, description, image, favicon }
  }
});
</script>

/api/unfurl es tu endpoint y no forma parte del editor. Debe obtener la página en el servidor, leer su <title>, og:description, og:image y su icono, y devolverlos como JSON. Un navegador no puede leer por sí mismo las páginas de otros sitios; por eso esto se ejecuta en tu servidor.

Opciones

Opción	Valor predeterminado	Función
bookmarkResolver	null	function (url) que devuelve los metadatos o una Promise con ellos: { title, description, image, favicon }. Todos los campos son opcionales.
bookmarkFaviconService	"" (desactivado)	Un prefijo de URL para los iconos de los sitios. El icono de la tarjeta usa este prefijo seguido del dominio, por ejemplo "/favicon-proxy?domain=". Solo se usa si el resolver no devuelve favicon.
text_insertbookmark, text_insertbookmarktitle, text_insertbookmarklabel	"Bookmark", "Insert bookmark", "Link URL"	Texto de ayuda del botón, título del cuadro de diálogo y etiqueta del campo.

Cómo usarlo

• Haz clic en el botón, llama a editor1.execCommand("insertbookmark")o elige "Bookmark" en el menú de comandos con barra. Escribe la dirección y pulsa Enter o Insert.
• Solo se aceptan http y https . A un dominio sin protocolo, como richtexteditor.com/docs/quick-start , se le antepone https:// . Las direcciones javascript:, data:, vbscript: y file: se rechazan con el mensaje "Enter a valid http(s) URL.".
• Mientras se ejecuta el resolver, el cuadro de diálogo muestra "Fetching preview…". Si falla o tarda más de 8 segundos, se inserta una tarjeta básica.
• Para eliminar una tarjeta, pasa el puntero sobre ella y haz clic en el botón redondo × de la esquina, o pulsa Delete o Backspace con el cursor sobre ella. No hay un paso de edición; elimina la tarjeta y vuelve a insertarla.

Aspectos a tener en cuenta

• La tarjeta guardada es un enlace. Con el resolver anterior, el contenido fue:

  <p><a class="rte-bookmark-card" data-rte-block="bookmark" href="https://richtexteditor.com/docs/quick-start" target="_blank" rel="noopener noreferrer" contenteditable="false" style=""><span class="rte-bookmark-remove" data-rte-bookmark-remove="1" role="button" tabindex="0" aria-label="Remove bookmark" title="Remove bookmark">x</span><span class="rte-bookmark-main"><span class="rte-bookmark-title">Quick start - RichTextEditor</span><span class="rte-bookmark-desc">Add the editor to a page in a few lines: download or npm, two script tags, one constructor call.</span><span class="rte-bookmark-url"><img class="rte-bookmark-favicon" src="/img/editor_32x32.png" alt="" width="16" height="16"><span>richtexteditor.com</span></span></span><span class="rte-bookmark-thumb" style="background-image:url('/img/editor-image.png')"></span></a></p>

• El aspecto de la tarjeta (borde, distribución y tamaño de la miniatura) lo define una hoja de estilos que el plugin añade solo dentro del editor. La página donde muestres el contenido necesita sus propias reglas para las clases rte-bookmark-* . Oculta también .rte-bookmark-remove en esa página: la × se guarda con la tarjeta.
• Las direcciones del icono y de la miniatura se guardan tal como las devuelve el resolver y las carga el navegador de cada lector. Devuelve direcciones de tu propio servidor (o de un proxy) si no quieres que los navegadores de los lectores se conecten al sitio enlazado.
• Sin un resolver ni bookmarkFaviconService, insertar una tarjeta no genera ninguna solicitud de red. La nota del cuadro de diálogo menciona un favicon, pero de forma predeterminada no hay ninguno.
• Los sanitizadores deben conservar a con href, target, rel y class, los elementos internos span y img y el atributo style de la miniatura (que contiene la imagen).

Relacionado: incrustación automática, chips inteligentes, demo de bloques enriquecidos.