Intégration automatique

Collez un lien vidéo YouTube, Vimeo ou autre sur une ligne vide : il devient un lecteur vidéo 16:9 dans le document. Le plugin reconnaît les liens d’après le format de leur adresse ; il ne fait appel à aucun service web, oEmbed ou autre.

L’éditeur après le collage d’un lien YouTube sur sa propre ligne : un lecteur YouTube de Big Buck Bunny occupe la largeur de l’éditeur sous la ligne Watch the short film — Résultat du collage de `https://www.youtube.com/watch?v=aqz-KE-bpKQ` dans un paragraphe vide.

Activation

Cette fonctionnalité est fournie par le plugin autoembed.js (également inclus dans plugins/all_plugins.js). Aucun bouton : le chargement du plugin suffit à l’activer.

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

Les pages qui chargent all_plugins.js l’activent déjà ; définissez autoEmbedEnabled: false pour conserver les liens vidéo collés sous forme de liens.

Liens pris en charge

Fournisseur	Lien collé	Adresse du lecteur
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 caractères hexadécimaux)	`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`

L’identifiant est vérifié selon un format strict propre à chaque fournisseur et l’adresse du lecteur est construite à partir d’un modèle fixe : le texte collé ne devient donc jamais tel quel l’adresse de l’iframe. Les liens vers d’autres sites, y compris les tweets, restent des liens ordinaires.

Options

Option	Valeur par défaut	Fonctionnement
`autoEmbedEnabled`	`true`	Active ou désactive l’intégration au collage. `editor.embedUrl()` fonctionne dans les deux cas.
`autoEmbedResolver`	`null`	`function (url)` pour vos propres fournisseurs. Renvoyez l’adresse du lecteur sous forme de chaîne commençant par `https://`, ou toute autre valeur pour laisser le lien tel quel. Cette fonction n’est appelée que pour les liens inconnus de la liste intégrée.

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;
  }
});

Avec ce résolveur, le collage de https://media.example.com/v/abc123 a créé un lecteur pour https://media.example.com/embed/abc123. Le même lien collé avec http:// est resté un lien : le résolveur ne l’a pas reconnu.

Utilisation

Collez le lien sur une ligne vide ou une ligne qui ne contiendra rien d’autre. Le paragraphe est remplacé par le lecteur, suivi d’un paragraphe vide où se place le curseur.
Un lien collé au milieu d’une phrase reste un lien : See this: https://youtu.be/… est devenu See this: <a href="https://youtu.be/…">…</a>.
Seul le collage d’une adresse unique en texte brut est pris en compte. Le texte contenant des espaces et le collage sur une sélection sont traités par le mécanisme de collage habituel de l’éditeur.
Depuis un script : editor1.embedUrl(url) insère le lecteur à la position du curseur et renvoie true, ou renvoie false pour une adresse inconnue. editor1.embedUrl("https://vimeo.com/76979871") a renvoyé true.
Pour une boîte de dialogue proposant des dimensions, utilisez le bouton Insert Video de l’éditeur (insertvideo).

À savoir

Le balisage enregistré comprend un conteneur qui renferme le lecteur :

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

Les dimensions figurent dans les styles en ligne : le lecteur conserve donc son format 16:9 sur votre page sans CSS supplémentaire. L’éditeur a ajouté l’attribut sandbox.

La création du lecteur ne nécessite aucun accès réseau : hors ligne, le collage a produit le même balisage. La vidéo elle-même se charge depuis le fournisseur quand quelqu’un la regarde ; le fournisseur a donc connaissance de la visite du lecteur.
Votre filtre de nettoyage doit autoriser iframe avec ces attributs et ne devrait autoriser que les hôtes des lecteurs ci-dessus. Une politique de sécurité du contenu doit inclure ces hôtes dans frame-src.

Voir aussi : démonstration d’intégration de médias, démonstration d’intégration vidéo, cartes de liens.