ブックマークカード

チャットアプリで共有するリンクのように、タイトル、短い説明、サイトアイコン、サムネイルを持つプレビューカードとしてリンクを挿入します。エディター自体は何も取得しません。独自の bookmarkResolver が返す情報を表示し、リゾルバーがない場合はドメイン名だけを表示します。

有効にする

この機能は bookmarkcard.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ツールバー項目は insertbookmark（ツールチップは「Bookmark」）です。既定のツールバーでは「More」（⋮）メニューにあります。独自のツールバーでは insertbookmark を追加します。すべての情報を持つカードを表示するには、ページのメタデータをサーバーに問い合わせるリゾルバーを指定します。

<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 は自分で用意するエンドポイントであり、エディターには含まれません。サーバーでページを取得し、<title>、og:description、og:image、アイコンを読み取って JSON で返します。ブラウザーからはほかのサイトのページを直接読み取れないため、この処理はサーバーで実行します。

オプション

オプション	既定値	動作
bookmarkResolver	null	メタデータ { title, description, image, favicon }、またはそれを解決値とする Promise を返す function (url) です。すべてのフィールドは省略できます。
bookmarkFaviconService	""（無効）	サイトアイコンの URL の接頭辞です。カードのアイコンには、"/favicon-proxy?domain=" のように、この接頭辞にドメインを付けた URL を使います。リゾルバーが favicon を返さない場合にのみ使用します。
text_insertbookmark, text_insertbookmarktitle, text_insertbookmarklabel	"Bookmark", "Insert bookmark", "Link URL"	ボタンのツールチップ、ダイアログのタイトル、フィールドのラベルです。

使い方

• ボタンをクリックするか、editor1.execCommand("insertbookmark") を呼び出すか、スラッシュメニューで「Bookmark」を選びます。URL を入力して Enter または Insert を押します。
• http と https のみ受け付けます。richtexteditor.com/docs/quick-start のようにスキームのないドメインには https:// を付けます。javascript:、data:、vbscript:、file: の URL は、「Enter a valid http(s) URL.」と表示して拒否します。
• リゾルバーの実行中は「Fetching preview…」と表示されます。失敗するか、8 秒を超えると、代わりに簡素なカードを挿入します。
• カードを削除するには、ポインターを重ねて隅の丸い × をクリックするか、カード上にカーソルを置いて Delete または Backspace を押します。編集の手順はありません。カードを削除して挿入し直します。

注意点

• 保存されるカードはリンクです。上記のリゾルバーを使うと、コンテンツは次のようになりました。

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

• カードの外観（枠線、レイアウト、サムネイルのサイズ）は、プラグインがエディター内だけに追加するスタイルシートで指定されます。表示先のページには、rte-bookmark-* クラス用のルールを用意してください。× もカードと一緒に保存されるため、.rte-bookmark-remove も非表示にします。
• アイコンとサムネイルの URL はリゾルバーが返したとおりに保存され、閲覧者それぞれのブラウザーから読み込まれます。リンク先のサイトに閲覧者のブラウザーを接続させたくない場合は、自分のサーバーまたはプロキシの URL を返します。
• リゾルバーも bookmarkFaviconService もない場合、カードを挿入してもネットワークリクエストは一切発生しません。ダイアログの注記には favicon とありますが、既定では表示されません。
• サニタイザーでは、href、target、rel、class を持つ a、内部の span と img 要素、およびサムネイルの style 属性を保持する必要があります。この属性に画像が設定されています。

関連情報：自動埋め込み、スマートチップ、リッチブロックのデモ。