Cards de bookmark

Insira um link como um card de prévia com título, uma descrição curta, o ícone do site e uma miniatura, como um link compartilhado em um app de chat. O editor não busca nada por conta própria: o card mostra o que o seu bookmarkResolver retornar, ou apenas o nome do domínio se você não tiver um.

Ative o recurso

O recurso é o plugin bookmarkcard.js (também incluído em plugins/all_plugins.js). O item da barra de ferramentas é insertbookmark (dica de ferramenta "Bookmark"). A barra de ferramentas padrão o traz no menu "More" (⋮); na sua própria barra de ferramentas, adicione insertbookmark. Para cards completos, forneça um resolver que peça ao seu servidor os metadados da 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 é o seu endpoint, e não faz parte do editor. Ele deve buscar a página no servidor, ler o <title>, og:description, og:image e o ícone dela, e retorná-los em JSON. Um navegador não consegue ler sozinho as páginas de outros sites; por isso, isso roda no seu servidor.

Opções

Opção	Padrão	O que faz
bookmarkResolver	null	function (url) que retorna os metadados, ou uma Promise deles: { title, description, image, favicon }. Todos os campos são opcionais.
bookmarkFaviconService	"" (desativado)	Um prefixo de URL para os ícones dos sites. O ícone do card passa a ser esse prefixo mais o domínio, por exemplo "/favicon-proxy?domain=". Usado apenas quando o resolver não retorna favicon.
text_insertbookmark, text_insertbookmarktitle, text_insertbookmarklabel	"Bookmark", "Insert bookmark", "Link URL"	Dica de ferramenta do botão, título da caixa de diálogo e rótulo do campo.

Como usar

• Clique no botão, chame editor1.execCommand("insertbookmark") ou escolha "Bookmark" no menu de barra. Digite o endereço e pressione Enter ou Insert.
• Só http e https são aceitos. Um domínio sem protocolo, como richtexteditor.com/docs/quick-start, recebe https:// na frente. Endereços javascript:, data:, vbscript: e file: são recusados com "Enter a valid http(s) URL."
• Enquanto o resolver roda, a caixa de diálogo mostra "Fetching preview…". Se ele falhar, ou demorar mais de 8 segundos, um card simples é inserido no lugar.
• Para remover um card, passe o mouse sobre ele e clique no × redondo no canto, ou pressione Delete ou Backspace com o cursor sobre ele. Não há etapa de edição; remova o card e insira-o de novo.

O que você precisa saber

• O card salvo é um link. Com o resolver acima, o conteúdo ficou assim:

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

• A aparência do card (borda, layout, tamanho da miniatura) é uma folha de estilo que o plugin adiciona apenas dentro do editor. A sua página de exibição precisa das próprias regras para as classes rte-bookmark-*. Oculte também .rte-bookmark-remove ali: o × é salvo junto com o card.
• Os endereços do ícone e da miniatura são armazenados como o resolver os forneceu e carregados pelo navegador de cada leitor. Retorne endereços no seu próprio servidor (ou em um proxy) se não quiser que o navegador dos leitores acesse o site do link.
• Sem resolver e sem bookmarkFaviconService, inserir um card não faz nenhuma requisição de rede. A observação da caixa de diálogo menciona um favicon, mas por padrão não há nenhum.
• Os sanitizadores precisam manter a com href, target, rel e class, os elementos internos span e img e o atributo style na miniatura (é ele que contém a imagem).

Relacionados: incorporação automática, smart chips, demonstração de blocos ricos.