TinyMCE Templates Package

This package consists of multiple TinyMCE templates. These templates can be used within your Episerver implementation to add default structure to your rich text content. The templates are listed below, along with how they appear once rendered on page. 

The default styling for the templates is done in bootstrap. However, additional configuration mentioned below allows for using custom class names within the templates.

For addional configuration or adding additional templates, you can reference this post I wrote describing how to Create Episerver TinyMCE Default Templates. 

The source for this project is available on our Github Repo.

You can find it on Episervers NuGet Feed.

Installation:

Installation is done via NuGet package. The templates are added to the modules/_protected folder. Upon installing the NuGet package, your web configuration file will update to include reference to the templates in the modules/_protected folder. By default the templates are styled in bootstrap.

Custom Styles:

With the added appSetting configuration below, each class will be prefixed with "ntemplate-" to assist in custom styling. 

<add key="nansen:tinymce:customcss" value="true"/>

Latest Version:

1.0.0

Dependencies:

• EPiServer.CMS.UI.Core [11.4.6,12.0)
• EPiServer.CMS.TinyMCE [2.4.0,2.8.0]
• Boostrap [4.0.0] (Optional)

I listed bootstrap as an optional dependecy. 4.0 is the version this was built with. If you decide to use the custom css, you can ignore this dependency.

Templates:

• Article Template: 2 Image Columns
• Article Template: 3 Image Columns
• Template with 2 Images
• Template with 3 Images
• General 2 Column Layout: (50%/50%)
• General 2 Column Layout: Image Left / Text Right (33%/66%)
• General 2 Column Layout:Text Left / Image Right (66%/33%)
• General 3 Column Layout
• Accordion

Article Template: 2 Image Columns

Template w/Side by side Images

Donec sit amet nibh vel dolor pharetra pharetra nec id diam. In in mauris faucibus, porttitor sapien a, aliquam ligula. In diam quam, mollis non erat eget, tempus placerat quam. Integer ultrices arcu nisl, eget sagittis massa vehicula in. Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.

 

Article Template: 3 Image Columns

Template with three image colums

Donec sit amet nibh vel dolor pharetra pharetra nec id diam. In in mauris faucibus, porttitor sapien a, aliquam ligula. In diam quam, mollis non erat eget, tempus placerat quam. Integer ultrices arcu nisl, eget sagittis massa vehicula in. Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.

 

Template with two images

Image Layout: 2 Columns

 

Template with three images

Image Layout: 3 Columns

 

General: 2 Column Layout: (50%/50%)

Template with two columns

General: 2 Column Layout: Image Left / Text Right (33%/66%)

Template with two columns. Image on the left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.

General 2 Column Layout: Text Left / Image Right (66%/33%)

Template with two columns. Image on the right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie enim id leo aliquet, ut vehicula est tempus. Duis in orci non urna commodo euismod sit amet quis nunc.Proin viverra turpis sed neque varius porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi mattis justo vitae urna consequat tincidunt. Sed facilisis libero tincidunt interdum ultricies.

General 3 Column Layout

Template with three columns

Accordion

Simple accordion example with 3 items