How to use mce_external_plugins filter in WordPress

mce_external_plugins filter

The mce_external_plugins filter takes an associative array of external plugins for TinyMCE in the form ‘plugin_name’ => ‘url’.

To use the mce_external_plugins filter, first you have to register it using add_filter. You can write this code into functions.php of your activated theme or in a custom WordPress Plugin.

We at WePlugins, always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function weplugins_modify_mce_external_plugins_defaults which takes 2 parameters and we registered using add_filter. The first parameter mce_external_plugins is the name of the hook, The second parameter weplugins_modify_mce_external_plugins_defaults is the name of the function which needs to be called, the third parameter is the priority of calling the hook if the same hook is used multiple times, and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometimes, you have to remove a registered hook, so you can use remove_filter to remove the mce_external_plugins filter.

Parameters

Below are the 2 parameters required to use this hook.

• $external_plugins : (array) An array of external TinyMCE plugins.
• $editor_id : (string) Unique editor identifier, e.g. ‘content’. Accepts ‘classic-block’ when called from block editor’s Classic block.

Live Examples

Add the TinyMCE VisualBlocks Plugin

This example demonstrates how to add the TinyMCE VisualBlocks Plugin using the mce_external_plugins filter.

    /**
     * Add the TinyMCE VisualBlocks Plugin.
     *
     * @param array $plugins An array of all plugins.
     * @return array
     */
    function weplugins_my_custom_plugins( $plugins ) {
         $plugins['visualblocks'] = plugins_url( 'tinymce/', __FILE__ ) . 'visualblocks/editor_plugin.js';
         return $plugins;
    }
    add_filter( 'mce_external_plugins', 'weplugins_my_custom_plugins' );
    

Modify External Plugins

Below is an example of how you can use this hook to modify the external plugins.

    function weplugins_modify_mce_external_plugins_defaults($external_plugins, $editor_id) { 
   
        // Update the $external_plugins variable according to your website requirements and return this variable. You can modify the $external_plugins variable conditionally too if you want.

        return $external_plugins; 
    }
    // add the filter
    add_filter( "mce_external_plugins", "weplugins_modify_mce_external_plugins_defaults", 10, 2 );
    

Remove a Hook Callback

To remove a hook callback, use the example below.

    remove_filter( "mce_external_plugins", "weplugins_modify_mce_external_plugins_defaults", 10, 2 );
    

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Contact Us

If you’re having any trouble using this hook or need customization, please contact our WordPress Development Team and we’d be happy to assist you.