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.

Create custom template

Adding an HTML snippet to the page

In the side bar of N1ED switch to the Add tab, scroll it down to the Custom templates section and click the Add button. In the opened window type the HTML code of the snippet and click the Save button.

Adding template

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.

Creating a custom widget

If not only do you want adding an HTML snippet to the page, but also save it for further use, do everything as above, but upon typing the HTML code turn on the Create template option. Specify the name of the template and optionally a hint and an icon (black-and-white transparent background PNG, 50*50px), and click Save.

Now the widget will appear in the widget palette of the sidebar and will be displayed on following runs of the browser as well. Note that this is a local widgets, which means it is saved directly in your browser (current domain local storage). Please read along if you want to share the widget with the team.

Share custom widget with the team

To allow all team mates embed your widget, you should make some changes to the server config. To see an example of how to do this, click the Share with team button in the settings of a locally created widget. You should see a fragment of the config that you need to paste to the server config of your CKEditor or TinyMCE.

Example of config with a custom HTML template:

customTemplates: [
        title: "Yellow sticker",
        html: "<div style='background-color:yellow;padding:10px'>Yellow sticker</div>"

If you use CMS integration with visual settings on (for example, N1ED Drupal 8 module), then everything becomes even simpler: add your template from the user interface of the control panel.