Change Text or Functionality of Buttons in IMG.LY Editor in Angular environment

Question

Trying to customize the export button and close button on the imgly photoeditor. Using version 5.17.2 currently of the photoeditorsdk. I need to be able to change the text of the export button to say 'Upload' and would like to have the close button always enabled. I haven't been able to accomplish either goal.

According to this link: https://support.img.ly/hc/en-us/articles/7772957651729-Can-I-customize-the-export-button- I can only customize buttons in Android or iOS app environment. However in their docs (https://img.ly/docs/pesdk/web/customization/icons/) about changing icons they mention changing label or disabled property of buttons. I tried using their code but I get a ton of errors and their code appears to be react-native (best guess at least) so I don't know how this is going to work. Then I tried going into the node modules to find the definition for their buttons so I could build from there but when I try to access the properties it says it doesn't exist on CustomButton type. Kind of at a loss on how this is actually supposed to work. Any help would be appreciated.

score 0 · Answer 1 · answered Mar 16 '23 at 10:58

Please note that the easiest way to change the text of the export button would be through the localization object:

  this.editor = await PhotoEditorSDKUI.init({
  license,
  container: this.container ? this.container.nativeElement : '',
  image: this.src,
  assetBaseUrl:
    'https://cdn.img.ly/packages/imgly/photoeditorsdk/5.17.3/assets',
  custom: {
    languages: {
      en: {
        mainCanvasActions: {
          buttonExport: 'Upload',
        },
      },
    },
  },
});

The createElement API of React allows you to create a custom close button:

import React from 'react';
import {
  Component,
  AfterViewInit,
  ViewChild,
  Input,
  ElementRef,
} from '@angular/core';
import {
  PhotoEditorSDKUI,
  EditorApi,
  OutlinedSecondaryButton,
  CustomButtonProps,
} from 'photoeditorsdk/no-polyfills';

const license = '';

const CloseButton = (props: CustomButtonProps) =>
  React.createElement(OutlinedSecondaryButton, {
    ...props,
    isDisabled: false,
  });

@Component({
  selector: 'app-photo-editor',
  templateUrl: './photo-editor.component.html',
})
export class PhotoEditorComponent implements AfterViewInit {
  @Input()
  public src = '';

  @ViewChild('editor', { static: false })
  private container: ElementRef<HTMLDivElement> | null = null;

  public editor: EditorApi | null = null;

  ngAfterViewInit() {
    this.initEditor();
  }

  async initEditor() {
    try {
      if (this.editor) {
        this.editor.dispose();
      }

      this.editor = await PhotoEditorSDKUI.init({
        license,
        container: this.container ? this.container.nativeElement : '',
        image: this.src,
        assetBaseUrl:
          'https://cdn.img.ly/packages/imgly/photoeditorsdk/5.17.3/assets',
        custom: {
          components: {
            buttons: { mainCanvasActionClose: CloseButton },
          },
        },
      });
    } catch (error) {
      console.log(error);
    }
  }
}

Change Text or Functionality of Buttons in IMG.LY Editor in Angular environment

1 Answers1