Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Sample TinyMCE configuration for a blog post. Cache bust style.css for editors.
using AlloyWithFind.Models.Blocks;
using AlloyWithFind.Models.Pages;
using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
namespace AlloyWithFind.Business.Initialization
public class ExtendedTinyMceInitialization : IConfigurableModule
public void Initialize(InitializationEngine context)
public void Uninitialize(InitializationEngine context)
public void ConfigureContainer(ServiceConfigurationContext context)
context.Services.Configure<TinyMceConfiguration>(config =>
// Add content CSS to the default settings.
.Width(748) // make the editor wider
.Height(450) // make the editor taller
.AddPlugin("code") // code plugin to view the source html of editor
.Toolbar("formatselect styleselect | bold italic | epi-link image epi-image-editor epi-personalized-content | bullist numlist outdent indent | code searchreplace fullscreen | help")
//.ContentCss("/static/css/editor.css") // this brings in bootstrap.css and style.css using import but then we can't cache bust those resources
.ContentCss("/static/css/bootstrap.css", "/static/css/style.css?v=1.0.3")
//.AddSetting("cache_suffix", "?v=1.0.2") // don't use as it also cache busts Episerver resources which already have cache busting
title = "title-paragraph-styles",
items = new[]
new { title = "title-introduction", selector = "p", classes = "introduction" },
new { title = "title-ingress", selector = "p", classes = "ingress" }
.AddSetting("style_formats_autohide", true)// hide styles when those can't be used
.AddSetting("style_formats_merge", true);// tinymce default styles + ours
// This will clone the default settings object and extend it by
// limiting the block formats for the MainBody property of an ArticlePage.
config.For<ArticlePage>(t => t.MainBody)
.BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3");
// Passing a second argument to For<> will clone the given settings object
// instead of the default one and extend it with some basic toolbar commands.
config.For<EditorialBlock>(t => t.MainBody, config.Empty())
.Toolbar("bold italic underline strikethrough");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.