CODEWITHSUNDEEP
c#formattinymceepiserver
wut
wut

Reputation: 327

Customize Format Items in EPiServer TinyMCE 2 (4.7.9)

I've just updated EPiServer on my site. With the update came the new TinyMCE. I have a question about how I would change the content of my format list.

This nice guide (https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/) was published yesterday and it show's how to do many things. But what I need to know is how to adjust the contents of the format-list. Remove <h1> option from the format drop-down for example.

This is how to do it in JavaScript: https://www.tinymce.com/docs/configure/editor-appearance/#menu

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'}
}
});

But how would I go about doing this in the EPiServer C# version of TinyMCE? toolbarSmall is my cusom config and it looks like this at the moment.

public void ConfigureContainer(ServiceConfigurationContext context)
{
    var toolbarsSmall = new[]
    {
        "epi-link unlink | cut copy paste pastetext pasteword searchreplace | table",
        "bold | bullist numlist hr | formatselect undo redo | | fullscreen code help | tinymcespellchecker a11ychecker"
    };


    context.Services.Configure((Action<TinyMceConfiguration>)(config =>
        config
            .Empty()
            .DisableMenubar()
            .Height(300)
            .Width(580)
            .Resize(TinyMceResize.Both)
            .ContentCss("/static/css/editor.css")
            .Plugins("epi-link epi-dnd-processor epi-personalized-content help image importcss fullscreen lists searchreplace hr table code paste media")
            .Toolbar(toolbarsSmall)));

    context.Services.Intercept((Func<IServiceLocator, IPersonalizedContentFactory, IPersonalizedContentFactory>) ((locator, defaultFactory) => new PersonalizedContentFactory(defaultFactory) as IPersonalizedContentFactory));
}

tinyMCE2 h1 format

Upvotes: 0

Views: 1801

Answers (1)

Ben McKernan
Ben McKernan

Reputation: 76

Check out my blog post up on Episerver World: https://world.episerver.com/blogs/Ben-McKernan/Dates/2018/3/an-updated-tinymce-package-has-been-released/

I think what you are after is the "block_formats" setting (https://www.tinymce.com/docs/configure/content-formatting/#block_formats) rather than the complex menu setting you are creating. There is a helper method on the settings object in Episerver for configuring block formats. For example:

config.Default()
    .BlockFormats("Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3");

Upvotes: 6

Related Questions