#TinyMCE Template plugin example with “insert-after” functionality

Example of use of templates, and with a feature trick to insert in bottom of the editor. #TinyMCE

Published 1st of October 2018
TinyMCE version 4 and later…

The Template plugin is easy to implement (check further down and documentation), but by default the template is inserted where the marker is. And I wanted the template to be added at the end of the document.

I looked into adding a new “insert after”-button on template-plugin UI, but that wasn’t doable.

Solution

Tag the html-templates and use the BeforeSetContent-event to hi-jack the pipe with your logic.

So, in the HTML templates I did start with a data attribute “<div data-insertafter” meaning it should have that behavior.

Template example:

  1. Implement the standard template plugin
  2. Register a custom plugin in tinymce.PluginManager

 

How to implement Template Plugin

All you need is …

1. add the source code to page

2. configure the template plugin

I choose to configure the templates in external file with json format “template.htm”

Example filestructure

Register in a custom plugin in Episerver

With package Episerver.Cms.Tinymce v2 and later, you use TinyMceInitialization like this:

Resources
SEO-Terms
  • Insert before, insert bottom templates plugin
  • Insert data after the content template plugin
  • tinymce 4 template plugin example
  • using tinymce template

About the author

Image of Luc GossoLuc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso

Like it? please up vote
2