Skip to content

bundling-plugins.adoc

Latest commit

 

History

History
169 lines (136 loc) · 4.23 KB

bundling-plugins.adoc

File metadata and controls

169 lines (136 loc) · 4.23 KB
Raw

Bundling {productname} plugins using module loading

Note
 If using {productname} 7.0.1 or earlier, please refer to Bundling {productname} plugins using module loading from the {productname} v6 documentation guide.

Example syntax for including the example "<plugincode>" plugin in a bundle using `content.js`for bundling:

Module Syntax Source Example

ES6+

npm (community plugins)

 
import 'tinymce/plugins/<plugincode>';

npm (premium plugins)

 
import 'tinymce-premium/plugins/<plugincode>';

.zip (community plugins)

 
import '../tinymce/plugins/<plugincode>';

.zip (premium plugins)

 
import '../tinymce-premium/plugins/<plugincode>';

Common JS

npm (community plugins)

 
require('tinymce/plugins/<plugincode>');

npm (premium plugins)

 
require('tinymce-premium/plugins/<plugincode>');

.zip (community plugins)

 
require('../tinymce/plugins/<plugincode>');

.zip (premium plugins)

 
require('../tinymce-premium/plugins/<plugincode>');
Note

When using import tinymce from 'tinymce', import only the individual premium plugins from tinymce-premium (e.g., import 'tinymce-premium/plugins/advcode'). Do not import the tinymce-premium package. The plugins automatically register with the {productname} instance.

Using premium plugins

After installing the tinymce-premium package, you need to configure the plugins in your editor. There are two main approaches:

Bundling (Recommended)

For most modern applications, bundling premium plugins is recommended. This includes the plugin code directly in your application bundle.

  1. Import the premium plugins you need:

    import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/licensekeymanager';
import 'tinymce-premium/plugins/tinycomments';

  2. Add the plugins to your editor configuration:

    tinymce.init({
  selector: 'textarea',
  license_key: 'T8LK:...', // Your commercial license key
  plugins: 'advcode tinycomments',
  // ... other configuration
});

For complete bundling examples, see the [Contents] section below.

Using external_plugins (Non-bundling)

When bundling is not available or you want to lazy-load plugins, use the external_plugins option:

tinymce.init({
  selector: 'textarea',
  license_key: 'T8LK:...', // Your commercial license key
  external_plugins: {
    'advcode': '/node_modules/tinymce-premium/plugins/advcode/plugin.min.js',
    'licensekeymanager': '/node_modules/tinymce-premium/plugins/licensekeymanager/plugin.min.js',
    'tinycomments': '/node_modules/tinymce-premium/plugins/tinycomments/plugin.min.js'
  },
  plugins: 'advcode tinycomments',
  // ... other configuration
});
Note

The external_plugins option supports three URL formats:

  • Absolute URLs (e.g., +https://cdn.example.com/…​)

  • Relative to web-server root (e.g., +/node_modules/…​)

  • Relative to {productname} base_url (e.g., +../../node_modules/…​)

For more information, see: external_plugins configuration option.

License key manager

Important

Always include the licensekeymanager plugin when using premium plugins with a commercial license. The editor will not function properly without it. For more information, see: License Key.

When bundling:

import 'tinymce-premium/plugins/licensekeymanager';

When using external_plugins:

external_plugins: {
  'licensekeymanager': '/node_modules/tinymce-premium/plugins/licensekeymanager/plugin.min.js'
}