Impossible to modify tinymce settings for props on local block pr

Impossible to modify tinymce settings for props on local block properties

Jørgen Helgheim

Vote:

I have a page with a "local" block. (Block used as a property on a page). This block has a XhtmlString property. But I can not change the configured TinyMCE editor for this property.

I tried used the documented approach (https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/default-settings/), but this failed.

 public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                var simpleConfiguration = config.Default().Clone()
                  .Toolbar("someFeature someFeature2");

                config.For<StartPage>(a => a.ChatSettingsBlock.WelcomeMessage, simpleConfiguration);
            });
        }

#207921

Oct 08, 2019 16:22

Praful Jangid

Vote:

You can not directly do that for the property on a block which is used as property on another block. You need to create a custom EditorDescriptor inheriting from XhtmlStringEditorDescriptor. Then apply that on your property like [UIHint(ProductDetailsEditorDescriptor.UIHint)]

Let me know if you need sample code example?

#207945

Oct 09, 2019 9:27

Praful Jangid

Vote:

Let me add sample code that will help you

Create a class

using System;
using System.Collections.Generic;
using EPiServer.Cms.TinyMce.Core;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using EPiServer.Shell.ObjectEditing;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;

[EditorDescriptorRegistration(
    TargetType = typeof(XhtmlString),
    EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault,
    UIHint = UIHint)]
public class ProductDetailsEditorDescriptor : XhtmlStringEditorDescriptor
{
    public const string UIHint = "PropertyListXhtmlString";

    public ProductDetailsEditorDescriptor(ServiceAccessor<TinyMceConfiguration> tinyMceConfiguration)
        : base(tinyMceConfiguration) { }

    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);
        if (!metadata.EditorConfiguration.ContainsKey("settings")) return;
        var settings = (TinyMceSettings)metadata.EditorConfiguration["settings"];
        if (settings == null) return;
        settings.AddPlugin(DefaultValues.EpiserverPlugins, "code contextmenu image table template");
        settings.Toolbar(
            "fontsizeselect bold italic underline strikethrough subscript superscript epi-link image epi-image-editor code",
            "table template bullist numlist outdent indent alignleft aligncenter alignright alignjustify searchreplace fullscreen help");
        settings.Width(450);
        settings.Height(200);
        settings.Resize(TinyMceResize.Vertical);
    }
}

And, apply it to your property as attribute

UIHint(ProductDetailsEditorDescriptor.UIHint)]
public virtual XhtmlString Column1 { get; set; }

Let me know if anything not clear

Thanks

#207946

Oct 09, 2019 9:36

Try our conversational search powered by Generative AI!

Impossible to modify tinymce settings for props on local block properties