epi-create-block not presented in TinyMCE options

Eric Petersson

Vote:

We are running EPiServer.CMS.TinyMCE 4.6.0 and are trying to add the new epi-create-block toolbar configuration, which is not working as intended. The options is not displayed with the following configuration:

public static class TinyMceConfigurationServiceCollectionExtensions
{
    private static readonly string _baseEpiserverEditorCssClass = "epi-editor__content";
    private static readonly string _baseCssStylePath = "/assets/build/editor.min.css";
    private static readonly string _baseScriptPath = "/ClientResources/Scripts/Plugins";

    private static readonly int _baseHeight = 700;
    private static readonly int _baseWidth = 626;

    public static IServiceCollection AddTinyMceConfiguration(this IServiceCollection services)
    {
        services.Configure((TinyMceConfiguration config) =>
        {
            var defaultTinyMceConfiguration = config.Default()
                .Resize(TinyMceResize.Both)
                .AddPlugin($"{TinyMCEButtons.Media} {TinyMCEButtons.Table} {TinyMCEButtons.WordCount} {TinyMCEButtons.Code}")
                .AddExternalPlugin($"{TinyMCEButtons.ThirdPartyPlugins.POWR}", $"{_baseScriptPath}/POWR.js")
                .Toolbar($"{TinyMCEButtons.PasteAsText} {TinyMCEButtons.RemoveFormat} epi-create-block {TinyMCEButtons.EpiDndProcessor} {TinyMCEButtons.Styles} {TinyMCEButtons.Blocks} {TinyMCEButtons.EpiLink} {TinyMCEButtons.Bold} {TinyMCEButtons.Italic} {TinyMCEButtons.Underline} {TinyMCEButtons.Strikethrough} " +
                    $"{TinyMCEButtons.Image} {TinyMCEButtons.EpiImageEditor} {TinyMCEButtons.Media} {TinyMCEButtons.EpiPersonalizedContent} {TinyMCEButtons.AlignLeft} {TinyMCEButtons.AlignCenter} {TinyMCEButtons.AlignRight} {TinyMCEButtons.AlignJustify} " +
                    $"{TinyMCEButtons.SearchReplace} {TinyMCEButtons.Fullscreen} {TinyMCEButtons.NumberedList} {TinyMCEButtons.BulletedList} {TinyMCEButtons.Indent} {TinyMCEButtons.Outdent} {TinyMCEButtons.Hr} {TinyMCEButtons.BlockQuote} " +
                    $"{TinyMCEButtons.Table} {TinyMCEButtons.ThirdPartyPlugins.POWR} {TinyMCEButtons.Code} {TinyMCEButtons.Help}")
                .BlockFormats($"Headline 1={TinyMCEButtons.BlockFormats.Headline1};Headline 2={TinyMCEButtons.BlockFormats.Headline2};Headline 3={TinyMCEButtons.BlockFormats.Headline3};Headline 4={TinyMCEButtons.BlockFormats.Headline4};Paragraph={TinyMCEButtons.BlockFormats.Paragraph}")
                    .BodyClass(_baseEpiserverEditorCssClass)
                    .ContentCss(_baseCssStylePath)
                    .Height(_baseHeight)
                    .Width(_baseWidth)
                .AddSetting("importcss_append", true)
                .StyleFormats(
                    new { title = "Set paragraph as body of copy", selector = "p", classes = "bread" },
                    new { title = "Set paragraph as quote for author", selector = "p", classes = "image-and-quote-caption" },
                    new { title = "Set image to left", selector = "img", classes = "left" },
                    new { title = "Set image to right", selector = "img", classes = "right" },
                    new { title = "Set no style for list", selector = "ul", classes = "list-styled" },
                    new { title = "Set checkbox style for list", selector = "ul", classes = "list-checkbox-styled" });

            config.For<StandardPage>(p => p.Text, defaultTinyMceConfiguration );
           
        });

        return services;
    }
}

When we disable the custom extension of the configuration for Standard Page with the above setting, the default Optimizely TinyMCE configuration kicks in, except the epic-create-block here aswell.

Is there a mismatch in version in terms of dependencies or similiar?

Regards
Eric

#313409

Nov 30, 2023 10:08

Eric Petersson

Vote:

For anyone facing the same issue:

I was involved with the support of Optimizely and the settings above seemed to be picked up properly in the DXP environments, but not locally.

Hence, try to comment out the following startup.cs configuration (if you happen to have one):

if (_webHostingEnvironment.IsDevelopment())
{
   //  services.Configure<ExternalApplicationOptions>(o => o.OptimizeForDelivery = true);
   // services.Configure<ClientResourceOptions>(o => o.Debug = true);
}

#313501

Dec 01, 2023 7:09