EditorLauncher

Type class

Main class to control amCharts 4 Editor in a bigger solution.

There are 4 essential steps needed to use the Editor in your app (make sure you read the setup guide too):

1. Create and instance of EditorLauncher;

2. Add event listeners for save and close events;

3. Set editor configuration;

4. Launch the editor.

Here's how this would look in code:

// import Editor Launcher
import * as am4editor from '@amcharts/editor4';

// instantiate launcher
let launcher = new am4editor.EditorLauncher();

// add event listeners
launcher.addEventListener('save', renderChart);
launcher.addEventListener('close', () => {
  if (this.launcher) {
    this.launcher.close();
  }
});

// set config
launcher.editorConfig = editorConfig;

// launch
launcher.launch();

More info: amCharts Editor 4 Architecture, Installation, and Usage

More info: IConfig - editor configuration

More info: ILauncherConfig - launcher configuration

More info: LauncherEventHandler - launcher event handler type

Sources

EditorLauncher can be used (imported) via one of the following packages.

TypeScript

/**
 * Import from: "editor.ts"
 * Use like: am4editor.EditorLauncher
 */
import * as am4editor from "@amcharts/editor4";

JavaScript

/**
 * Include via: <script src="editor.js"></script>
 * Access items like: am4editor.EditorLauncher
 */

Inheritance

EditorLauncher does not extend any other symbol.

EditorLauncher is not extended by any other symbol.

Properties

#editorConfig

Type IConfig

Editor configuration settings.

Configure various aspects of the Editor look, feel, and behavior via these settings.

More info: IConfig

#editorUrl

Type string

URI for the editor application.

By default Editor application is expected to be under /am4editor/.

Set this property to a new location, in case you've changed the default folder structure.

#target

Type ILauncherTarget

Set this to control how to open the editor window.

When you call the launch() method, it opens the Editor based on this setting.

The Editor can open in an inline popup or a new browser window/tab.

Additionally, you can make it open inside a particular element (usually a DIV) on your page.

More info: ILauncherTarget

Methods

#addEventListener(eventType: LauncherEventType,
listener: LauncherEventHandler)

Returns void

Add an event listener for Launcher events ('save' or 'close')

// add event listeners
launcher.addEventListener('save', renderChart);
launcher.addEventListener('close', () => {
  if (this.launcher) {
    this.launcher.close();
  }
});

#addLicense(editorLicense: string)

Returns void

Sets editor license number

#close()

Returns void

Closes the Editor window.

#constructor(launcherConfig?: ILauncherConfig)

Returns EditorLauncher

Creates an instance of EditorLauncher.

#launch(chartConfig?: object)

Returns void

Launches amCharts 4 Editor.

You can pass a chart configuration object for editing.

Creates a new chart otherwise.

#removeEventListener(eventType: LauncherEventType,
listener: LauncherEventHandler)

Returns void

Remove an event listener for Launcher events.

Events

EditorLauncher does not have any events.