Docs

Custom Templates in CKEditor and TinyMCE

The N1ED add-on envelopes a range of widgets for TinyMCE/CKEditor, and the Bootstrap Editor add-on provides even more. But what if you need to add your own widget? In this case you can insert your own HTML snippet to the content or add your own widgets to the system by providing custom HTML templates for them.

Adding a custom template

Using CDN version

The easiest way to add custom template when you use CDN version of N1ED is to configure your custom widgets manually. Go to "Widgets" section and press "New template" button. New widget will be created. Insert HTML code for this widget and save configuration. Now your N1ED editor will let you insert this widget on next load.

Please make sure the HTML content you insert is formatted properly. N1ED protects you from adding definitely invalid HTML, but all the layout issues are to be fixed by the HTML content developer then. If you have received the snippet from some external source (for example, as an embedding code to insert a video), then you probably should have no problems.

Adding template

Using self-hosted version

The same result you can reach if set customTemplates option in config of your editor.

Custom templates is a parameter with array of templates inside. Each template can be a a structure with two fields: title (for showing in widgets palette) and html: HTML string or callback function returning HTML string (if you need to dynamically insert something based on current environment).

Example of config with a custom HTML template:

customTemplates: [
    // Static template
    {
        title: "Yellow sticker",
        html: "<div style='background-color:yellow;padding:10px'>Yellow sticker</div>"
    },
    // Dynamic template
    {
        title: "Current host",
        html: function() { return "<div>This is " + window.location.host + "</div>"; }
    },
],

Quick adding HTML snippet

In the side bar of N1ED switch to the Add tab, scroll it down to the HTML snippet button, click on it, paste the HTML code and press "Insert". This code will be inserted to your document but will not be saved as configuration of your editor.