Bildeditor

Ermöglicht dem Benutzer das Zuschneiden, Drehen, Spiegeln, Zeichnen, Kommentieren oder Filtern eines Bilds, das sich bereits im Dokument befindet, ohne den Editor zu verlassen. Beim Speichern durchläuft das bearbeitete Bild Ihren Upload-Handler und das Bild erhält die neue URL. Ohne Handler wird es als PNG-Daten-URL eingebettet.

Schalten Sie es ein

Die Funktion ist dieimageeditor.jsPlugin (auch inplugins/all_plugins.js). Die Bearbeitungswerkzeuge selbst sind vorhandenplugins/tui.image-editor/, das das Plugin erst beim Öffnen in den Dialog lädt, vonurl_base + "/plugins/tui.image-editor/". Bewahren Sie diesen Ordner bei der Bereitstellung neben dem Plugin auf.

Der Knopf istimageeditor ( "Image Editor"). Es befindet sich in der Standardbildsymbolleiste (controltoolbar_IMG), das erscheint, wenn der Benutzer auf ein Bild klickt, sodass der Hauptsymbolleiste nichts hinzuzufügen ist. Wählen Sie im Code zuerst das Bild aus und führen Sie es auseditor.execCommand("imageeditor").

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

<div id="editor"><p><img src="landscape.png" width="320" alt="Hills under a sun"></p></div>
<script>
// Called on Save with the edited picture: (file, callback(url, error)).
function uploadToServer(file, callback) {
  fetch("/upload", { method: "POST", headers: { "x-file-name": file.name }, body: file })
    .then(function (r) { return r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)); })
    .then(function (data) { callback(data.url); })
    .catch(function (err) { callback(null, err.message); });
}
var editor = new RichTextEditor("#editor", { file_upload_handler: uploadToServer });
</script>

Dies ist derselbe Handler, den der Editor für eingefügte und abgelegte Bilder verwendet. sehenDateien hochladenfür vollständige Serverbeispiele.

Optionen

Das Plugin verfügt über keine eigenen Optionen. Es lautet wie folgt:

Option	Standard	Was es hier macht
`file_upload_handler`	keiner	Erhält das bearbeitete Bild beim Speichern. Wenn es nicht eingestellt ist,`window.rte_file_upload_handler`verwendet wird.
`url_base`	`"/richtexteditor"`	Wo`plugins/tui.image-editor/`wird geladen von.
`controltoolbar_IMG`	beinhaltet`imageeditor`	Entfernen`imageeditor`aus, um die Schaltfläche auszublenden.
`text_ie_title`, `text_ie_save`, `text_ie_saving`, `text_ie_uploadfailed`, `text_ie_nourl`	Englisch	Der Dialogtitel, die Schaltfläche „Speichern“ und die Upload-Meldungen. Die Sprachpakete legen sie fest.

Verwenden

Der Dialog nimmt 90 % des Fensters ein. Die Werkzeuge unten sind „Rückgängig“, „Wiederherstellen“, „Zurücksetzen“, „Löschen“, „Alle löschen“, „Zuschneiden“ (Benutzerdefiniert, Quadratisch, 3:2, 4:3, 5:4, 7:5, 16:9), „Spiegeln“, „Rotieren“, „Zeichnen“, „Form“, „Symbol“, „Text“, „Maske“ und „Filter“. Speichern befindet sich oben rechts; Im Feld daneben werden Upload-Fehler angezeigt.

Was Save tut, hängt vom Upload-Handler ab:

Mit einem Handler. Das Bild wird als File mit dem Namen image-<timestamp>.png und dem Typ image/png übergeben. Speichern zeigt "Saving..." an, bis Sie zurückrufen. callback(url) setzt den src des Bildes auf diese URL und schließt den Dialog. callback(null, "File too large") hält das Dialogfeld mit intakter Bearbeitung geöffnet und zeigt "Upload failed: File too large" an, sodass der Benutzer es erneut versuchen kann. Ein Handler, der auslöst, zeigt seine Fehlermeldung auf die gleiche Weise an.
Ohne Handler. Der src des Bildes wird zu einer data:image/png;base64,...-URL und der Dialog wird geschlossen.

Nur src ändert sich. Die Attribute width, alt und andere Attribute des Bildes bleiben unverändert, sodass ein auf 16:9 zugeschnittenes Bild sein altes Breitenattribut behält und seine Höhe aus der neuen Form folgt. Der gespeicherte HTML-Code aus dem obigen Lauf (der id wird vom Editor zu jedem Bild hinzugefügt, nicht von diesem Plugin):

<p><img src="/uploads/image-1793772809490.png" width="320" alt="Hills under a sun" id="rte-fig-cl2s5j0"></p>

Wissenswertes

Das Ergebnis ist immer PNG. Ein JPEG-Foto wird als PNG zurückgegeben und ist normalerweise größer: Ein 640×400-JPEG wurde in unserem Test als 78-KB-PNG zurückgegeben. Wenn Ihr Server nur einige Erweiterungen akzeptiert, erlauben Sie .png.
Ohne einen Handler wird das Bild eingebettet, auch wenn allowBase64Images false ist. In 2.6.12 überprüft der Bildeditor diese Einstellung nicht. Wenn Sie Base64 deaktiviert haben (siehe Bildspeicherung), legen Sie auch einen Upload-Handler fest oder entfernen Sie imageeditor aus controltoolbar_IMG.
Bilder von einer anderen Site benötigen CORS. Das Bild wird auf einer Leinwand gezeichnet, daher muss ein Bild von einem anderen Ursprung mit einem Access-Control-Allow-Origin-Header bereitgestellt werden. Ist dies nicht der Fall, wird das Bild nicht im Dialogfeld angezeigt und beim Speichern in 2.6.12 wird es durch ein leeres 300×150-PNG ersetzt. Bearbeiten Sie nur Bilder von Ihrer eigenen Domain oder einem CDN, das CORS-Header sendet.
Filter. In 2.6.12 wird das Bild im Dialog nicht neu gezeichnet, nachdem ein Filter aktiviert wurde; Der Filter wird auf das gespeicherte Bild angewendet. Graustufen und Invertieren schnitten in unserem Test gut ab; Sepia ergab falsche (lila) Farben. Überprüfen Sie das Ergebnis nach dem Speichern.
Tastatur. Die Werkzeugpalette ist nicht vollständig über die Tastatur bedienbar. In der Erklärung zur Barrierefreiheit wird dies als bekannte Lücke aufgeführt.
Keine externen Anfragen. Öffnen des Editors und Speichern geladener Dateien nur von plugins/tui.image-editor/ auf dem eigenen Host der Seite; Das Plugin schaltet die Nutzungsstatistiken der Bibliothek aus.

Verwandt: Bildbearbeitungsdemo, Dateien hochladen, Bildspeicher, Bildergalerie.