Try our conversational search powered by Generative AI!

CMS - Admin - Content Type - Page Type - Custom settings

Vote:
 

I have tried floowing the example outline in this article https://world.optimizely.com/documentation/Items/Developers-Guide/Episerver-CMS/9/Editing/Customizing-the-TinyMCE-editor/#configureTinyMCE

Can anyone provide insight into how I can Add the TinyMCE Editor - Settings like Width and Height to the "Custom Settings" tab?
 

#302230
May 23, 2023 21:09
Vote:
 

Hi Eric,

Are you working in Optimizley CMS 9?

I have fired up a new Optimizley CMS 12 - Alloy site and can see the option for width and height is already available.

Could you share a screengrab at all so we can see what you are seeing?

If you are however trying to set the width and height of the WYSIWYG editor then you will need to implement a tinymceconfiguration. See the below:

 public static class ServiceConfigurationContextExtensions
    {
        public static void AddTinyMceConfiguration(this IServiceCollection services)
        {
            services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .AddPlugin("media wordcount anchor code searchreplace")
                    .Toolbar("blocks fontfamily fontsize | epi-personalized-content epi-link anchor numlist bullist indent outdent bold italic underline code",
                        "alignleft aligncenter alignright alignjustify | image epi-image-editor media | epi-dnd-processor | forecolor backcolor | removeformat | searchreplace fullscreen")
                    .AddSetting("image_caption", true)
                    .AddSetting("image_advtab", true)
                    .AddSetting("resize", "both")
                    .AddSetting("height", 800)
                  .AddSetting("width", 1000);

                config.Default()
                    .AddEpiserverSupport()
                    //.AddExternalPlugin("icons", "/ClientResources/Scripts/fontawesomeicons.js")
                    .AddSetting("extended_valid_elements", "i[class], span");
                //.ContentCss(new[] { "/ClientResources/Styles/fontawesome.min.css",
                //    "https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i",
                //    "/ClientResources/Styles/TinyMCE.css" });
            });
        }
    }

Then add to the StartUp.cs

services.AddTinyMceConfiguration();

Thanks

Paul

PS. If this is helpful can you place upvote so that others can find this information.

#302270
Edited, May 24, 2023 8:21
Eric Brown - May 24, 2023 14:13
This solution works. However, the end-user wants the ability to adjust the screen settings without code changes. This is why I am hoping to be able to add the ability to do through the Custom settings tab for this element.
Vote:
 

I am using 11.20.7.0.

I am unable to include screenshots.  On this screen in my CMS - Admin - Content Type - Page Type - MyPage - Edit Property - Cutom Settings tab, I only have the XHTML string(>255).  I am hoping to add the "TimeMCE Editor" section. 

#302279
Edited, May 24, 2023 12:35
Vote:
 

Hi Eric,

I haven't got a CMS 11 handy however. I created this initializationmodule that should allow you to configure the tinymce editor from code:

[ModuleDependency(typeof(TinyMceInitialization))]
public class ExtendedTinyMceInitialization : IConfigurableModule
{
    public void Initialize(InitializationEngine context)
    {
    }
 
    public void Uninitialize(InitializationEngine context)
    {
    }
 
    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.Services.Configure(config =>
        {
            // Add the default settings.
            config.Default()
                .AddEpiserverSupport()
                .EnableImageTools()
                .Menubar("file edit insert view format table tools help")
                .AddPlugin("epi-link").AddPlugin("epi-image-editor").AddPlugin("epi-dnd-processor")
                .AddPlugin("epi-personalized-content").AddPlugin("print").AddPlugin("preview").AddPlugin("searchreplace")
                .AddPlugin("autolink").AddPlugin("directionality").AddPlugin("visualblocks").AddPlugin("visualchars")
                .AddPlugin("fullscreen").AddPlugin("image").AddPlugin("link").AddPlugin("media").AddPlugin("template").AddPlugin("codesample").AddPlugin("table").AddPlugin("charmap")
                .AddPlugin("hr").AddPlugin("pagebreak").AddPlugin("nonbreaking").AddPlugin("anchor").AddPlugin("toc").AddPlugin("insertdatetime").AddPlugin("advlist").AddPlugin("lists")
                .AddPlugin("textcolor").AddPlugin("wordcount").AddPlugin("imagetools").AddPlugin("contextmenu").AddPlugin("colorpicker").AddPlugin("textpattern").AddPlugin("help")
                .AddPlugin("code") // There are several plugins available, including paid ones
                .Toolbar("formatselect | bold italic strikethrough forecolor backcolor " +
                    "| epi-link | alignleft aligncenter alignright alignjustify " +
                    "| numlist bullist outdent indent | removeformat | epi-image-editor | epi-personalized-content | cut copy paste | fullscreen",
                    "table | toc | codesample code") // Pipes represent separators in the editor UI
                .BlockFormats("Paragraph=p;Header 2=h2;Header 3=h3; Header 4=h4;Header 5=h5")
		    .Width(800)
                .Height(400);
 
            // 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.
            // An example with a highly configured property using three rows in its toolbar
            config.For(p => p.Description, config.Empty()) // Choose the block, field and the base configuration
                .AddPlugin("epi-link")
                .Toolbar("formatselect | bold italic strikethrough forecolor backcolor " +
                    "| epi-link | alignleft aligncenter alignright alignjustify " +
                    "| numlist bullist outdent indent | removeformat | epi-personalized-content | cut copy paste");
        });
    }
}

If I get a chance later I will run a CMS 11 demo and see what is happening.

Thanks

Paul

#302281
May 24, 2023 13:58
Vote:
 

Hi Eric,

I think the issue here is that you're running CMS 11.x which will be using v2.x of the separate TinyMCE NuGet package but the documentation you're referencing relates to the older inbuilt version of the TinyMCE editor which used to be included in older versions of the CMS. According to the TinyMCE editor documentation:

"From version 2.0, you can no longer customize the TinyMCE editor from the CMS admin view. All changes are done through code."

If managing the editor in the CMS admin UI is essential then you should be able to downgrade the EPiServer.CMS.TinyMce package to version 1.x which was basically the old editor but separated into its own NuGet package. Bear in mind though that you'll potentially be missing out on bug fixes and new features by downgrading.

#302289
May 24, 2023 21:11
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.