Nansen-logo.png

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

Template w/Side by side Images


 

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.

Subheading

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.

Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.
Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit.

Integer laoreet ligula sed eros posuere, eget semper nibh luctus. Maecenas lacus nisi, fermentum sit amet consectetur condimentum, condimentum id velit. Praesent scelerisque urna convallis, auctor orci non, facilisis diam. Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit. Pellentesque fringilla nulla at convallis molestie. Integer non nunc sapien. Morbi erat nunc, sagittis fermentum felis sit amet, venenatis aliquam lacus.

 

Article Template: 3 Image Columns

Template with three image colums


 

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.

Subheading

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.

Ut nec eros non velit aliquam imperdiet a nec lorem. Integer sit amet ante ut turpis maximus convallis eget at tortor.
Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit.
Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit.

Integer laoreet ligula sed eros posuere, eget semper nibh luctus. Maecenas lacus nisi, fermentum sit amet consectetur condimentum, condimentum id velit. Praesent scelerisque urna convallis, auctor orci non, facilisis diam. Proin vel fringilla nibh, eget dignissim velit. Curabitur elementum sapien eget nisi congue egestas. Etiam nec ex hendrerit, maximus odio sed, congue elit. Pellentesque fringilla nulla at convallis molestie. Integer non nunc sapien. Morbi erat nunc, sagittis fermentum felis sit amet, venenatis aliquam lacus.

 

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


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.

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: 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


 

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.

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.

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.

Accordion

Simple accordion example with 3 items


 

Group #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
David profile picture
David Boland

I'm a Senior Software Developer at Nansen in Chicago, blogging mostly about Episerver and other cool dev stuff.  

Episerver MVP Rectangal Logo