title: "Editor Scripts" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Scripts Styles - Src - Repos

Editor Scripts

When you develop addons that extend Elementor Editor and you have custom scripts, use elementor/editor/before_enqueue_scripts or elementor/editor/after_enqueue_scripts action hooks, which are fired when editor scripts are registered and enqueued.

Registering Editor Scripts

In the example below, we'll register and enqueue custom scripts before Elementor scripts are registered and enqueued:

```php {6,12} function my_plugin_register_editor_scripts() { wp_register_script( 'editor-script-1', plugins_url( 'assets/js/editor-script-1.js', FILE ) ); wp_register_script( 'editor-script-2', plugins_url( 'assets/js/editor-script-2.js', FILE ), [ 'external-library' ] ); wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', FILE ) ); } add_action( 'wp_enqueue_scripts', 'my_plugin_register_editor_scripts' );

function my_plugin_enqueue_editor_scripts() { wp_enqueue_script( 'editor-script-1' ); wp_enqueue_script( 'editor-script-2' ); } add_action( 'elementor/editor/before_enqueue_scripts', 'my_plugin_enqueue_editor_scripts' );

Now we'll register and enqueue custom scripts **after** Elementor scripts are registered and enqueued:

```php {6,12}
function my_plugin_register_editor_scripts() {
    wp_register_script( 'editor-script-1', plugins_url( 'assets/js/editor-script-1.js', __FILE__ ) );
    wp_register_script( 'editor-script-2', plugins_url( 'assets/js/editor-script-2.js', __FILE__ ), [ 'external-library' ] );
    wp_register_script( 'external-library', plugins_url( 'assets/js/libs/external-library.js', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_register_editor_scripts' );

function my_plugin_enqueue_editor_scripts() {
    wp_enqueue_script( 'editor-script-1' );
    wp_enqueue_script( 'editor-script-2' );
}
add_action( 'elementor/editor/after_enqueue_scripts', 'my_plugin_enqueue_editor_scripts' );