Automatisch einbetten

Fügen Sie a einYouTube , Vimeooder einen anderen Videolink in eine leere Zeile einfügen und im Dokument wird daraus ein 16:9-Videoplayer. Das Plugin erkennt Links anhand ihres Adressmusters; Es ruft kein oEmbed oder einen anderen Webdienst auf.

Der Editor, nachdem er einen YouTube-Link in eine eigene Zeile eingefügt hat: Ein YouTube-Player für Big Buck Bunny füllt die Breite des Editors unterhalb der Zeile aus. Sehen Sie sich den Kurzfilm an — Das Ergebnis des Einfügens`https://www.youtube.com/watch?v=aqz-KE-bpKQ`in einen leeren Absatz.

Schalten Sie es ein

Die Funktion ist dieautoembed.jsPlugin (auch inplugins/all_plugins.js). Es gibt keine Schaltfläche: Durch das Laden des Plugins wird es aktiviert.

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

<div id="div_editor1"><p>Watch the short film:</p><p><br></p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertlink,insertvideo}|{undo,redo}"
});
</script>

Seiten, die geladen werdenall_plugins.jshabe es schon an; SatzautoEmbedEnabled: falseum eingefügte Videolinks als Links beizubehalten.

Unterstützte Links

Anbieter	Link eingefügt	Spieleradresse
YouTube	`youtube.com/watch?v=ID`, `youtu.be/ID`, `youtube.com/shorts/ID`	`https://www.youtube.com/embed/ID`
Vimeo	`vimeo.com/123456789`, `player.vimeo.com/video/123456789`	`https://player.vimeo.com/video/ID`
Dailymotion	`dailymotion.com/video/ID`, `dai.ly/ID`	`https://www.dailymotion.com/embed/video/ID`
Loom	`loom.com/share/ID`(32 Hex-Zeichen)	`https://www.loom.com/embed/ID`
CodePen	`codepen.io/USER/pen/ID`	`https://codepen.io/USER/embed/ID?default-tab=result`
TED	`ted.com/talks/NAME`	`https://embed.ted.com/talks/NAME`
Youku	`v.youku.com/v_show/id_ID.html`	`https://player.youku.com/embed/ID`
Coub	`coub.com/view/ID`	`https://coub.com/embed/ID`

Die ID wird anhand eines strengen Musters für jeden Anbieter überprüft und die Player-Adresse wird aus einer festen Vorlage erstellt, sodass der eingefügte Text nie so wie er ist zur Iframe-Adresse wird. Links von anderen Websites, einschließlich Tweets, bleiben normale Links.

Optionen

Option	Standard	Was es bewirkt
`autoEmbedEnabled`	`true`	Schaltet das Einbetten beim Einfügen ein oder aus.`editor.embedUrl()`funktioniert so oder so.
`autoEmbedResolver`	`null`	`function (url)`für Ihre eigenen Anbieter. Geben Sie die Spieleradresse als Zeichenfolge zurück, beginnend mit`https://`, oder irgendetwas anderes, um den Link in Ruhe zu lassen. Es wird nur nach Links gefragt, die die integrierte Liste nicht kennt.

var editor1 = new RichTextEditor("#div_editor1", {
  autoEmbedResolver: function (url) {
    var m = /^https:\/\/media\.example\.com\/v\/([a-z0-9]+)$/i.exec(url);
    return m ? "https://media.example.com/embed/" + m[1] : null;
  }
});

Mit diesem Resolver Einfügenhttps://media.example.com/v/abc123machte einen Spieler fürhttps://media.example.com/embed/abc123. Den gleichen Link einfügen mithttp://Habe einen Link erstellt: Der Resolver stimmte nicht damit überein.

Benutze es

Fügen Sie den Link in eine leere Zeile oder in eine Zeile ein, die nichts anderes enthält. Der Absatz wird durch den Spieler und einen leeren Absatz danach ersetzt, mit der Einfügemarke dort.
Ein mitten im Satz eingefügter Link bleibt ein Link:See this: https://youtu.be/…wurdeSee this: <a href="https://youtu.be/…">…</a>.
Es zählen nur Klartexteinfügungen einer Adresse. Text mit Leerzeichen oder das Einfügen über eine Auswahl bleibt dem normalen Einfügen des Editors überlassen.
Aus dem Skript:editor1.embedUrl(url)fügt den Player an der Einfügemarke ein und kehrt zurücktrue, oder kehrt zurückfalsefür eine Adresse weiß es nicht.editor1.embedUrl("https://vimeo.com/76979871")zurückgegebentrue.
Für einen Dialog mit Größenoptionen verwenden Sie die Schaltfläche „Video einfügen“ des Editors (insertvideo).

Wissenswertes

Das gespeicherte Markup ist ein Wrapper mit dem Player darin:

<div class="rte-embed" contenteditable="false" data-embed="https://www.youtube.com/embed/aqz-KE-bpKQ" style="display:block; margin:12px 0; max-width:720px"><div class="rte-embed-frame" style="position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden; border-radius:10px; background:#000"><iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ" loading="lazy" allowfullscreen="" referrerpolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0" sandbox="allow-scripts allow-same-origin allow-presentation"></iframe></div></div>

Die Größenanpassung erfolgt im Inline-Stil, sodass der Player ohne zusätzliches CSS seine 16:9-Form auf Ihrer Seite behält. Der Herausgeber hat das hinzugefügtsandboxAttribut.

Für die Erstellung des Players ist kein Netzwerk erforderlich: Offline erzeugte das Einfügen immer noch das gleiche Markup. Das Video selbst wird vom Anbieter geladen, wenn jemand es ansieht, was auch bedeutet, dass der Anbieter den Besuch des Betrachters sieht.
Ihr Sanitizer muss iframe mit diesen Attributen zulassen und sollte nur die oben genannten Player-Hosts zulassen. Eine Inhaltssicherheitsrichtlinie benötigt diese Hosts in frame-src.

Verwandt: Medien-Einbettungsdemo, Einbettungsvideo-Demo, Lesezeichenkarten.