H5 -Zwischenablage -API für Bild und reichhaltige Textmanipulation

Die Clipboard -API von H5 kann Bild und reichhaltiges Text über CLIPBOARDEM und NAVIGATOR.Clipboard realisieren, müssen jedoch auf Kompatibilitäts- und Sicherheitsrichtlinien achten. 1. Image Kopieren erfordert das Abrufen des Bildes und das Umwandeln in den Blob und das Erstellen eines ClipboardItems unter Verwendung von Navigator.clipboard. 2. Es wird empfohlen, Navigator.clipboard.WritEText für reichhaltiges Textkopieren zu verwenden. Sie können auch ClipboardItems konstruieren, die Text/Normal- und Text-/HTML -Typen enthalten, um Stile zu erhalten. 3.. Alle Replikationsvorgänge müssen durch Benutzerinteraktion ausgelöst werden und die Berechtigungsausnahmen verarbeiten. Falls erforderlich, downgrade, um execcommand zu verwenden.

Die Zwischenablement-API von H5 macht das Front-End wirklich in der Lage, Klemmbretter zu betreiben, insbesondere wenn es sich um Bilder und einen reichen Text handelt. Es hat jedoch auch einige Einschränkungen und Vorsichtsmaßnahmen bei der Verwendung. Als nächstes werde ich mit den tatsächlichen Anwendungsszenarien beginnen und darüber sprechen, wie diese API verwendet wird, um einige gemeinsame Funktionen zu implementieren.

Kopieren Sie das Bild in die Zwischenablage: unterstützt, aber bedingt

Wenn Sie in einem mobilen Browser ein Bild in die Zwischenablage kopieren möchten, können Sie es über ClipboardItem und ImageBitmap implementieren, aber nicht alle Browser unterstützen es, insbesondere einige alte Versionen oder häusliche Muschelbrowser.

Der Grundprozess ist wie folgt:

• Holen Sie sich Bildressourcen durch fetch
• In Blob konvertieren
• Erstellen Sie ClipboardItem
• Schreiben Sie mit navigator.clipboard.write()

Beispielcode -Snippet:

 Async Function CopyImagetoclipboard (URL) {
  const response = wartet avetch (URL);
  const blob = wartete auf response.blob ();
  const item = new clipboardItem ({[blob.type]: blob});
  Warten Sie navigator.clipboard.write ([item]);
}

Punkte zu beachten:

• Es muss in der HTTPS -Umgebung sein, um anzurufen
• Einige Browser erfordern die Auslöser von Benutzern (z. B. Klickereignisse)
• Verschiedene Plattformen unterstützen verschiedene Bildformate. Es ist am besten, WebP und JPEG zu testen

Reiches Textkopieren ist flexibler und hat eine bessere Kompatibilität

Reiches Textkopieren ist viel stabiler als Bilder. Sie können navigator.clipboard.writeText() verwenden, um Klartext zu kopieren, oder Sie können execCommand('copy') verwenden, um Kompatibilität in der alten Umgebung auszuführen.

Modern empfohlene Schreibmethode:

 navigator.clipboard.writetext (&#39;<p> Dies ist ein reicher Textinhalt </p>&#39;)
  .then (() => alert (&#39;erfolgreich kopieren&#39;))
  .Catch (err => console.Error (&#39;Copy fehlgeschlagen&#39;, err));

Wenn Sie HTML -Inhalte kopieren möchten, müssen Sie möglicherweise auch die Pasteboard -Datenstruktur in einigen Editor -Szenarien manuell konstruieren, z. B. das Hinzufügen von text/html -Inhalt.

Ein etwas komplizierteres Beispiel:

 const html = &#39;<strong> fettem Text </strong>&#39;;
const text = &#39;mutiger Text&#39;;

const clipboardItem = new clipboardItem ({{
  &#39;text/plain&#39;: neuer Blob ([Text], {type: &#39;text/plain&#39;}),
  &#39;text/html&#39;: neuer Blob ([html], {type: &#39;text/html&#39;})
});

Warten Sie navigator.clipboard.write ([clipboardItem]);

Der Vorteil davon ist, dass Sie den Stil beibehalten können, wenn Sie an Orten einfügen, an denen reiche Textpasten unterstützt werden (z. B. Word oder Rich Texteditor).

Der Auslöser der Benutzerinteraktion ist sehr wichtig. Vergessen Sie nicht das Erlaubnisproblem

Unabhängig davon, ob Sie Bilder oder einen reichen Text kopieren, muss dies durch das aktive Verhalten des Benutzers ausgelöst werden , z. B. Klicken auf Schaltflächen, langes Drücken usw. Andernfalls werfen der Browser einen Fehler, um Missbrauch zu verhindern.

Darüber hinaus werden einige Browser Berechtigungsanfragen eröffnen und Sie müssen Ausnahmen abwickeln:

 versuchen {
  Warten Sie navigator.clipboard.writetext ('Inhalt');
} catch (err) {
  console.Error ('Zwischenablage kann nicht zugegriffen werden', arr);
}

Wenn Sie auf eine nicht unterstützte Umgebung stoßen, können Sie die Herabstufung auf document.execCommand('copy') in Betracht ziehen. Obwohl diese Methode aufgegeben wurde, ist sie in einigen alten Projekten immer noch nützlich.

Grundsätzlich ist das. Die Clipboard -API -Funktion von H5 ist sehr praktisch, aber in der tatsächlichen Entwicklung sollten Sie auf Kompatibilitäts- und Sicherheitsrichtlinien achten und nicht erwarten, dass alle Geräte perfekt unterstützt werden.

Das obige ist der detaillierte Inhalt vonH5 -Zwischenablage -API für Bild und reichhaltige Textmanipulation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!