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();

@see amCharts Editor 4 Architecture, Installation, and Usage
IConfig - editor configuration
ILauncherConfig - launcher configuration
LauncherEventHandler - launcher event handler type

Sources

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

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

/**
 * --------------------------------------------------------
 * Include via: <script src="editor.js"></script>
 * Access items like: am4.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.

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.

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.

Adapters

EditorLauncher does not have any adapters.