Custom Templates logo

Custom Templates plugin

Define, update and re-use custom templates in your content
Custom Templates screenshot
Custom Templates screenshotInsert custom template screenshot
Custom Templates logo

Add custom code snippets to your collection and get quick access to it. You can catalog all predefined templates into categories. All new templates will have screenshots that are generated automatically.

Content management is pretty easy with custom templates. Insert one by clicking on it in the library and it will be added.

CKEditor 4 logo CKEditor 4
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Custom Templates plugin in CKEditor 4

Download Custom Templates
ZIP archive of Custom Templates for CKEditor 4

Then do these simple steps:

  1. Copy CustomTemplates directory to ckeditor/plugins/.
  2. Edit CKEditor config and add CustomTemplates to extraPlugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

Example of configuring with config.js

If you prefer to edit config.js config file of CKEditor or when your CKEditor initialization code is placed inside some non-editable part of CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "CustomTemplates";
};

Example of configuring inside initialization code

Some CMSs do not use config.js file and let to edit CKEditor initialization script only. Do this changes there:

CKEDITOR.replace("#editor", {
    extraPlugins: "CustomTemplates",
});

Install Custom Templates plugin in TinyMCE 6

Download Custom Templates
ZIP archive of Custom Templates for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy CustomTemplates directory to tinymce/plugins/.
  2. Edit TinyMCE config and add CustomTemplates to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "CustomTemplates",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy CustomTemplates directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Custom Templates plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add CustomTemplates to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "CustomTemplates",
    external_plugins: {
        "CustomTemplates": "http://example.com/public/CustomTemplates/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Custom Templates plugin in TinyMCE 5

Download Custom Templates
ZIP archive of Custom Templates for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy CustomTemplates directory to tinymce/plugins/.
  2. Edit TinyMCE config and add CustomTemplates to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "CustomTemplates",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy CustomTemplates directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Custom Templates plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add CustomTemplates to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "CustomTemplates",
    external_plugins: {
        "CustomTemplates": "http://example.com/public/CustomTemplates/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Custom Templates plugin in TinyMCE 4

Download Custom Templates
ZIP archive of Custom Templates for TinyMCE 4

Then do these simple steps:

  1. Copy CustomTemplates directory to tinymce/plugins/.
  2. Edit TinyMCE config and add CustomTemplates to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "CustomTemplates",
});

Refer to TinyMCE add-ons installation manual for more details

Reviews

Some snippets are usually needed from time to time, and some always. Every time when I inserted one of the code pieces in the source dialog I was missing such plugin.

User icon
Ron K.
Individual

Tell a friend about Custom Templates

Send