Lesezeichenkarten

Fügen Sie einen Link als Vorschaukarte mit einem Titel, einer kurzen Beschreibung, dem Symbol der Website und einer Miniaturansicht ein, wie einen geteilten Link in einer Chat-App. Der Editor selbst holt nichts: Die Karte zeigt, was Ihr Eigenes istbookmarkResolvergibt zurück, oder nur den Domänennamen, wenn Sie keinen haben.

Der Editor mit einer Linkkarte: der Titel Quick start – RichTextEditor, eine einzeilige Beschreibung, ein kleines Site-Symbol mit der Domain richtexteditor.com und ein Miniaturbild auf der rechten Seite — Eine Karte, die aus was gebaut wurde`bookmarkResolver`zurückgegeben für`richtexteditor.com/docs/quick-start`. Der gestrichelte Ring auf dem kleinen Symbol markiert den Editor, der ein Bild markiert`alt`ist leer; Es wird nur während der Bearbeitung angezeigt.

Schalten Sie es ein

Die Funktion ist diebookmarkcard.jsPlugin (auch inplugins/all_plugins.js). Das Symbolleistenelement istinsertbookmark(Tooltip"Bookmark"). Die Standardsymbolleiste enthält es in der"More"(⋮) Menü; in Ihrer eigenen Symbolleiste hinzufügeninsertbookmark. Geben Sie für vollständige Karten einen Resolver ein, der Ihren Server nach den Metadaten der Seite fragt:

<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/unfurlist Ihr Endpunkt, nicht Teil des Editors. Es sollte die Seite auf dem Server abrufen und lesen<title>, og:description, og:imageund das Symbol und geben Sie sie als JSON zurück. Ein Browser kann die Seiten anderer Websites nicht selbst lesen, weshalb dieser auf Ihrem Server ausgeführt wird.

Optionen

Option	Standard	Was es bewirkt
`bookmarkResolver`	`null`	`function (url)`Rückgabe der Metadaten oder eines Versprechens davon:`{ title, description, image, favicon }`. Jedes Feld ist optional.
`bookmarkFaviconService`	`""`(aus)	Ein URL-Präfix für Site-Symbole. Das Symbol der Karte wird beispielsweise zu diesem Präfix und der Domäne`"/favicon-proxy?domain="`. Wird nur verwendet, wenn der Resolver „Nein“ zurückgibt`favicon`.
`text_insertbookmark`, `text_insertbookmarktitle`, `text_insertbookmarklabel`	`"Bookmark"`, `"Insert bookmark"`, `"Link URL"`	Schaltflächen-Tooltip, Dialogtitel und Feldbezeichnung.

Der Editor mit einer einfachen Linkkarte, die nur richtexteditor.com als Titel und wiederum als Domain anzeigt — Derselbe Link ohne Resolver: Der Titel ist die Domain und es gibt keine Beschreibung, kein Symbol oder Bild.

Verwenden

Klicken Sie auf die Schaltfläche, rufen Sie editor1.execCommand("insertbookmark") auf oder wählen Sie "Bookmark" im Slash-Menü aus. Geben Sie die Adresse ein und drücken Sie die Eingabetaste oder Einfügen.
Nur http und https werden akzeptiert. Einer bloßen Domäne wie richtexteditor.com/docs/quick-start steht https:// voran. javascript:-, data:-, vbscript:- und file:-Adressen werden mit "Enter a valid http(s) URL."
Während der Resolver ausgeführt wird, wird im Dialogfeld "Fetching preview…" angezeigt. Wenn dies fehlschlägt oder länger als 8 Sekunden dauert, wird stattdessen eine einfache Karte eingelegt.
Um eine Karte zu entfernen, bewegen Sie den Mauszeiger darauf und klicken Sie auf das runde × in der Ecke oder drücken Sie die Entf- oder Rücktaste-Taste, während sich die Einfügemarke darauf befindet. Es gibt keinen Bearbeitungsschritt; Entfernen Sie die Karte und stecken Sie sie erneut ein.

Wissenswertes

Die gespeicherte Karte ist ein Link. Mit dem obigen Resolver war der Inhalt:

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

Das Aussehen der Karte (Rahmen, Layout, Miniaturbildgröße) ist ein Stylesheet, das das Plugin nur im Editor hinzufügt. Ihre Anzeigeseite benötigt eigene Regeln für die rte-bookmark-*-Klassen. .rte-bookmark-remove auch dort ausblenden: Das × wird mit der Karte gespeichert.
Die Symbol- und Miniaturbildadressen werden so gespeichert, wie sie vom Resolver angegeben wurden, und von jedem Browser des Lesers geladen. Geben Sie Adressen auf Ihrem eigenen Server (oder einem Proxy) zurück, wenn Sie nicht möchten, dass die Browser der Leser Kontakt mit der verlinkten Website aufnehmen.
Ohne Resolver und ohne bookmarkFaviconService stellt das Einsetzen einer Karte überhaupt keine Netzwerkanfrage dar. In der Anmerkung des Dialogs wird ein Favicon erwähnt, aber standardmäßig ist keins vorhanden.
Desinfektionsmittel müssen a mit href, target, rel und class, den inneren span und einhalten img-Elemente und das style-Attribut auf der Miniaturansicht (es enthält das Bild).

Verwandt: Automatische Einbettung, Smart Chips, Rich Blocks Demo.