Editor de imágenes

Permite recortar, girar, voltear, dibujar, anotar o aplicar filtros a una imagen que ya está en el documento sin salir del editor. Al pulsar Save, la imagen editada pasa por tu controlador de carga y recibe la nueva URL; sin controlador, se incrusta como una URL de datos PNG.

Cómo activarlo

Esta función la ofrece el plugin imageeditor.js (también incluido en plugins/all_plugins.js). Las herramientas de edición están en plugins/tui.image-editor/, que el plugin carga en el cuadro de diálogo solo cuando este se abre, desde url_base + "/plugins/tui.image-editor/". Mantén esa carpeta junto al plugin al desplegar.

El botón es imageeditor ("Image Editor"). Está en la barra de imágenes predeterminada (controltoolbar_IMG), que aparece cuando el usuario hace clic en una imagen, por lo que no hay que añadir nada a la barra principal. Desde el código, selecciona primero la imagen y ejecuta editor.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>

Es el mismo controlador que usa el editor para las imágenes insertadas y arrastradas; consulta Subir archivos para ver ejemplos completos de servidor.

Opciones

El plugin no tiene opciones propias. Lee estas:

Opción	Valor predeterminado	Función en este contexto
`file_upload_handler`	ninguno	Recibe la imagen editada al pulsar Save. Si no está configurado, se usa `window.rte_file_upload_handler` .
`url_base`	`"/richtexteditor"`	Desde dónde se carga `plugins/tui.image-editor/` .
`controltoolbar_IMG`	incluye `imageeditor`	Elimina `imageeditor` de esa lista para ocultar el botón.
`text_ie_title`, `text_ie_save`, `text_ie_saving`, `text_ie_uploadfailed`, `text_ie_nourl`	Inglés	El título del cuadro de diálogo, el botón Save y los mensajes de carga. Los paquetes de idioma los configuran.

Cómo usarlo

El cuadro de diálogo ocupa el 90% de la ventana. Las herramientas de la parte inferior son Undo, Redo, Reset, Delete, Delete all, Crop (Custom, Square, 3:2, 4:3, 5:4, 7:5, 16:9), Flip, Rotate, Draw, Shape, Icon, Text, Mask y Filter. Save está arriba a la derecha; el cuadro contiguo muestra los errores de carga.

El comportamiento de Save depende del controlador de carga:

Con un controlador. La imagen se pasa como un File llamado image-<timestamp>.png con el tipo image/png. Save muestra "Saving..." hasta que llamas al callback. callback(url) establece el src de la imagen en esa URL y cierra el cuadro de diálogo. callback(null, "File too large") mantiene abierto el cuadro de diálogo con la edición intacta y muestra "Upload failed: File too large", para que el usuario pueda volver a intentarlo. Un controlador que lance una excepción muestra su mensaje de error de la misma forma.
Sin un controlador. El src de la imagen se convierte en una URL data:image/png;base64,... y el cuadro de diálogo se cierra.

Solo cambia src . Los atributos width, alt y los demás atributos de la imagen permanecen como estaban, por lo que una imagen recortada a 16:9 conserva su atributo de ancho anterior y su altura se ajusta a la nueva proporción. El HTML guardado en la ejecución anterior (el id lo añade el editor a todas las imágenes, no este plugin):

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

Aspectos a tener en cuenta

El resultado siempre es PNG. Una foto JPEG vuelve como PNG y normalmente ocupa más: en nuestra prueba, un JPEG de 640×400 produjo un PNG de 78 KB. Si tu servidor solo acepta algunas extensiones, permite .png.
Sin controlador, la imagen se incrusta incluso cuando allowBase64Images es false. En 2.6.12, el editor de imágenes no comprueba ese ajuste. Si has desactivado base64 (consulta Almacenamiento de imágenes), configura también un controlador de carga o elimina imageeditor de controltoolbar_IMG.
Las imágenes de otro sitio necesitan CORS. La imagen se dibuja en un canvas, por lo que una imagen de otro origen debe servirse con un encabezado Access-Control-Allow-Origin . Si no lo tiene, la imagen no aparece en el cuadro de diálogo y Save en 2.6.12 la sustituye por un PNG vacío de 300×150. Edita solo imágenes de tu propio dominio o de una CDN que envíe encabezados CORS.
Filtros. En 2.6.12, la imagen del cuadro de diálogo no se vuelve a dibujar al marcar un filtro; el filtro se aplica a la imagen guardada. Grayscale e Invert funcionaron bien en nuestra prueba; Sepia produjo colores incorrectos (morados). Comprueba el resultado después de guardar.
Teclado. La paleta de herramientas no se puede manejar por completo con el teclado. La declaración de accesibilidad lo recoge como una limitación conocida.
Sin solicitudes externas. Al abrir el editor y guardar, solo se cargaron archivos de plugins/tui.image-editor/ en el propio servidor de la página; el plugin desactiva las estadísticas de uso de la biblioteca.

Relacionado: demo de edición de imágenes, Subir archivos, Almacenamiento de imágenes, Galería de imágenes.