Loading...
Area: Episerver CMS
Applies to versions: 11.21.1 and higher

Example of adding custom relative paths in TinyMCE

This scenario shows how to extend the HyperLink editor descriptor and use the TinyMCE custom link dialog to allow an editor to create links relative to the site. For example, if the site host is www.alloydemo.com and the relative link is news/my-video, the link will redirect to www.alloydemo.com/news/my-video.

1. Register a new EditorDescriptor for HyperLink UIHint. Set the EditorDescriptorBehavior to PlaceLast. As a result, the original descriptor will be executed first, and we can apply custom settings.

using System;
using System.Collections.Generic;
using System.Linq;
using EPiServer.Shell.ObjectEditing;
using EPiServer.Shell.ObjectEditing.EditorDescriptors;

namespace AlloyTemplates.Business.EditorDescriptors
{
    [EditorDescriptorRegistration(
        TargetType = typeof(string), 
        UIHint = "HyperLink", 
        EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)
    ]
    internal class CustomLinkEditorDescriptor : EditorDescriptor
    {
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            base.ModifyMetadata(metadata, attributes);

            if (!metadata.EditorConfiguration.ContainsKey(("providers")))
            {
                return;
            }

            var providers = (metadata.EditorConfiguration["providers"] as IEnumerable<object>).ToList();

            providers.Add(new
            {
                Name = "Site link",
                Title = "Site link",
                DisplayName = "Site relative link",
                WidgetType = "dijit/form/ValidationTextBox"
            });

            metadata.EditorConfiguration["providers"] = providers;
        }
    }
}

2. In the ModifyMetadata method, register the new provider. It will be used to handle custom relative links.

The Provider requires a WidgetType, which is a Dojo widget class used to edit the value of the new provider. In this case, it is a standard ValidationTextbox. After running the site, we should see a dialog box with an additional Site relative link field.

Extended link dialog.png

3. To make relative links work in TinyMCE, set the convert_urls setting to false, to prevent TinyMCE from converting the value.

config.Default()
    .ContentCss(locator.GetInstance<IVirtualPathResolver>().ToAbsolute("~/static/css/editor.css"))
    .BodyClass("custom_partner_body_class")
    .AddPlugin("code")
    .InitializationScript("alloy/advancedTinyMCEConfig")
    .AddSetting("convert_urls", false);

Last updated: Jul 12, 2019