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 with side by side images for article layouts.
Article Template: 3 Image Columns
Template with three image columns for article layouts.
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 equal columns for general content.
General: 2 Column Layout: Image Left / Text Right (33%/66%)
Template with two columns - image on the left (33%) and text on the right (66%).
General 2 Column Layout: Text Left / Image Right (66%/33%)
Template with two columns - text on the left (66%) and image on the right (33%).
General 3 Column Layout
Template with three equal columns for general content.
Accordion
Simple accordion example with collapsible sections.