Multiple tinyMce Settings for different properties

Gonzalo Fuentes

Vote:

Episerver 11 with TinyMce 2.

How can i create multiple tinyMce Settings for different properties in same pagetype?

I tried to do this:

    [ModuleDependency(typeof(TinyMceInitialization))]
    class ExtendedTinyMceInitialization : IConfigurableModule
    {
        public void Initialize(InitializationEngine context)
        {

        }

        public void Uninitialize(InitializationEngine context)
        {

        }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                // Styles
                var headerStyles = new
                {
                    title = "Rubriker",
                    items = new[]
                    {
                        new {title = "Rubrik 1", block = "h1"},
                        new {title = "Rubrik 2", block = "h2"},
                        new {title = "Rubrik 3", block = "h3"},
                        new {title = "Rubrik 5", block = "h5"}
                    }
                };

                var listStyles = new
                {
                    title = "Listutseende",
                    items = new object[]
                    {
                        new {title = "Exempelruta 1", selector = "ul", classes = "exempelruta"},
                        new
                        {
                            title = "Grey arrows",
                            selector = "ul",
                            classes = "grey-arrow",
                            styles = new {color = "#808080"}
                        },
                        new
                        {
                            title = "Black arrows",
                            selector = "ul",
                            classes = "black-arrow",
                            styles = new {color = "#000000"}
                        },
                        new
                        {
                            title = "Green arrows",
                            selector = "ul",
                            classes = "green-arrow",
                            styles = new {color = "#008000"}
                        },
                        new
                        {
                            title = "Filled Green arrows",
                            selector = "ul",
                            classes = "green-arrow-filled",
                            styles = new {color = "#008000"}
                        }
                    }
                };
                var imageStyles = new
                {
                    title = "Bildutseende",
                    items = new object[]
                    {
                        new {title = "Infographics", selector = "img", classes = "infographics"},
                        new {title = "FullBredd", selector = "img", classes = "full-width-image"},
                        new {title = "Centrerad", selector = "img", classes = "centered-image"}
                    }
                };
                // Default values
                config.Default()
                    .ContentCss("/Content/Editor.css")
                    .AddPlugin(
                        "epi-link epi-image-editor epi-dnd-processor epi-personalized-content print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor " +
                        " imagetools colorpicker textpattern help code")
                    .Toolbar(
                        "bold italic strikethrough forecolor | epi-link image epi-image-editor epi-personalized-content | customfaktabuttonplugin customimagebuttonplugin | bullist numlist | searchreplace fullscreen ",
                        "styleselect formatselect | alignleft aligncenter alignright alignjustify | removeformat | table code"
                        , "")
                    .AddEpiserverSupport()
                .StyleFormats(headerStyles, listStyles, imageStyles);

              //  Custom toolbar
                var basicTinyMceSettings = config.Default()
                    .AddEpiserverSupport()
                    .AddPlugin("epi-link", "code")
                    .Toolbar("epi-link unlink || bold italic underline || cut copy paste || undo redo || code")
                    .Height(300)
                    .Width(580);

                var noFormattingOptionsTinyMceSettings = config.Empty()
                    .AddEpiserverSupport()
                    .Toolbar("cut copy paste || undo redo")
                    .Height(300)
                    .Width(580);

                var onlyBoldAndItalicTinyMceSettings = config.Default()
                    .AddEpiserverSupport()
                    .Toolbar("bold italic || cut copy paste || undo redo")
                    .Height(300)
                    .Width(580);


                // Pages
                config.For<ContactPageBase>(p => p.Information, basicTinyMceSettings);
                config.For<ContactPageBase>(p => p.PostalAddress, config.Empty()
                    .AddEpiserverSupport()
                    .Toolbar("cut copy paste || undo redo")
                    .Height(300)
                    .Width(580));
                config.For<ContactPageBase>(p => p.VisitingAddress, noFormattingOptionsTinyMceSettings);
                config.For<ContactPageBase>(p => p.OpeningTimes, onlyBoldAndItalicTinyMceSettings);
                config.For<ContactPageBase>(p => p.TelephoneTimes, onlyBoldAndItalicTinyMceSettings);

                //Blocks
                config.For<MainMenuLinkBlock>(t => t.Text, basicTinyMceSettings);
                config.For<TeaserSectionBlock>(t => t.Text, basicTinyMceSettings);
            });
        }
    }

but i didnt work. It only show default for all XhtmlString.

Thanks in advance!

#201113

Edited, Feb 06, 2019 10:46

Marcus B

Vote:

Shouldn't hte config.For<>s be after the definitions of the settings?

#201142

Feb 06, 2019 22:25

Gonzalo Fuentes

Vote:

hi. yes of course, my copy and paste fault. It's now corrected. But still having the same issue. Any suggestions?

#201151

Feb 07, 2019 9:16

Jake Jones

Vote:

Hi Gonzalo,

Are your default configurations applied? At a glance, your code here looks ok (except for the fact that you define basicTinyMceSettings twice?).

Are you able to share your entire Initializable Module?

#201179

Feb 07, 2019 20:51

Gonzalo Fuentes

Vote:

Here is the entire Initializable Module

#201207

Feb 08, 2019 16:49

Vote:

Hi Gonzalo, I suppose you have changed the code in the initial post after Jake commented it?

But currently when you are creating "basicTinyMceSettings" you are not cloning config.Empty() but also changing it (assuming you actually wanted to have config.Empty.Clone() ...) and when you create the "otherTinyMceSettings" you will end up having the modified "empty" as base for the other settings.

Also this can't be the real code because there is missing the ';' from the basic and other tinymce settings definitions afteer calling Toolbar(...), so that code will not compile.

EDIT: poster changed code again.

In the current code all your custom "toolbar" configurations are missing .Clone() when creating different settings (now you code modifies Default() or Empty())

#201208

Edited, Feb 08, 2019 16:59

Gonzalo Fuentes

Vote:

So it should be like below for my custom toolbars:

var noFormattingOptionsTinyMceSettings = config.Empty().Clone()
                    .AddEpiserverSupport()
                    .Toolbar("cut copy paste || undo redo")
                    .Height(300)
                    .Width(580);

In that way it it should only contain "cut copy paste undo redo" in the toolbar for those properties selected, as below

 config.For<ContactPageBase>(p => p.VisitingAddress, noFormattingOptionsTinyMceSettings);

And keeping all other tinyMce as default.

#201252

Feb 11, 2019 13:37