Try our conversational search powered by Generative AI!

Tiny MCE - With the CMS upgrade, we've lost the ability to link to anything other than a CMS content page from within tinyMCE editor

Vote:
 

Tiny MCE - With the CMS upgrade, we've lost the ability to link to anything other than a CMS content page from within tinyMCE editor

CMS Version - 11.20.4

The tinyMCE editor used to allow us to select a content, category, media etc item to link to when you click the insert a link button in the editor screen. But now, all we can link to is CMS content:

We have to edit the HTML source code to link to a pdf, product or category page, and makes it difficult for any basic CMS user to link to anything other than a CMS page.

I'd expect to see this screen:

We are seing this - 

Looking at the documentation we need to add the epi-link which we already have. Following is our configuration override.

context.Services.Configure<TinyMceConfiguration>(config =>
            {
                //TinyMce has changed its plugin behavior since >= 2.0.0 and no more under property setting you can customize teh buttons
                //This initializer need to be built to control the button and plugins you need to make it visible
                config.Default()
                    .Menubar("file edit insert view format table tools help")
                    .Plugins("epi-link epi-image-editor epi-dnd-processor epi-personalized-content, advlist autolink autosave link image lists charmap print preview hr anchor pagebreak code",
                        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                        "table contextmenu directionality emoticons template textcolor paste textcolor colorpicker textpattern")
                    .Toolbar(
                        "newdocument cut copy paste epi-personalized-content | bold italic underline strikethrough | formatselect searchreplace alignleft aligncenter alignright alignjustify | bullist numlist",
                        "outdent indent blockquote | undo redo | link unlink anchor image media pagebreak | insertdatetime preview | forecolor backcolor code",
                        "table | hr removeformat | subscript superscript | print fullscreen | visualchars visualblocks nonbreaking restoredraft");

                config.Default().DisableMenubar()
                    .AddSetting("toolbar_items_size", "small")
                    .AddSetting("width", "620")
                    .AddSetting("extended_valid_elements", "script[language|src|type]")
                    .AddSetting("forced_root_block","")
                    .AddSetting("valid_children", "+body[style],+body[div]");

                
            });

Thanks

Kind Regards

Sandeep

#248664
Feb 15, 2021 22:27
Vote:
 

Are you on the latest version of the TinyMCE package. I can confirm on my instance that on 

  <package id="EPiServer.CMS" version="11.20.4" targetFramework="net472" />
  <package id="EPiServer.CMS.AspNet" version="11.20.4" targetFramework="net472" />
  <package id="EPiServer.CMS.Core" version="11.20.4" targetFramework="net472" />
  <package id="EPiServer.CMS.TinyMce" version="2.13.2" targetFramework="net472" />
  <package id="EPiServer.CMS.UI" version="11.32.1" targetFramework="net472" />
  <package id="EPiServer.CMS.UI.Core" version="11.32.1" targetFramework="net472" />

With the following TinyMCE module 

    /// <summary>
    /// Configures the settings for the TinyMCE editor in the episerver editor
    /// </summary>
    /// <seealso cref="EPiServer.ServiceLocation.IConfigurableModule" />
    [ModuleDependency(typeof(TinyMceInitialization))]
    public class ExtendedTinyMceInitialization : IConfigurableModule
    {
        /// <summary>
        /// Initializes this instance.
        /// </summary>
        /// <param name="context">The context.</param>
        /// <remarks>
        /// Gets called as part of the EPiServer Framework initialization sequence. Note that it will be called
        /// only once per AppDomain, unless the method throws an exception. If an exception is thrown, the initialization
        /// method will be called repeadetly for each request reaching the site until the method succeeds.
        /// </remarks>
        public void Initialize(InitializationEngine context)
        {
        }

        /// <summary>
        /// Resets the module into an uninitialized state.
        /// </summary>
        /// <param name="context">The context.</param>
        /// <remarks>
        /// <para>
        /// This method is usually not called when running under a web application since the web app may be shut down very
        /// abruptly, but your module should still implement it properly since it will make integration and unit testing
        /// much simpler.
        /// </para>
        /// <para>
        /// Any work done by <see cref="M:EPiServer.Framework.IInitializableModule.Initialize(EPiServer.Framework.Initialization.InitializationEngine)" /> as well as any code executing on <see cref="E:EPiServer.Framework.Initialization.InitializationEngine.InitComplete" /> should be reversed.
        /// </para>
        /// </remarks>
        public void Uninitialize(InitializationEngine context)
        {
        }

        /// <summary>
        /// Configure the IoC container before initialization.
        /// </summary>
        /// <param name="context">The context on which the container can be accessed.</param>
        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .ContentCss("/Assets/Editor/editorstyles.css")
                    .AddPlugin("code wordcount media table") // code plugin to view the source html of editor
                    .Toolbar(
                        "epi-link image epi-image-editor media epi-personalized-content | cut copy paste pastetext | fullscreen code | help",
                        "blockquote alignleft aligncenter alignright alignjustify bold italic underline | bullist numlist | styleselect | undo redo searchreplace | table", 
                        "")
                    .StyleFormats(
                        new { title = "-- Text Styles --" },
                        new {title = "Standard Text", block = "p"},
                        new { title = "Header 1", block = "h1" },
                        new { title = "Header 2", block = "h2" },
                        new { title = "Header 3", block = "h3" },
                        new { title = "Header 4", block = "h4" }
                    );
            });
        }
    }

I am seeing the correct behaviour with the expected screen

#248688
Feb 16, 2021 9:02
Vote:
 

HI Scott

I have upgarde the Tiny MCE version as well as our site version - but that does not seem to have made any difference.

We have tried with you configuration and with the one we have with no effect.

Any furhter input is much appreciated.

Thanks

Kind Regards

Sandeep

#248930
Feb 21, 2021 1:33
Vote:
 

At a guess I would suggest trying to go through any other init modules, any display templates or custom editor definitions you may have in your site code and try investigating/disabling them. If the standard functionallity isn't working you may have something that's overriding the dojo editor such as a module config, display template or something like that as if you're using the code as show there shouldn't be a reason it doesn't work. Also maybe review any third party plugins you have too

#248931
Feb 21, 2021 9:27
Vote:
 

Simply change from link to epi-link on this line in your configuration.

"outdent indent blockquote | undo redo | link unlink anchor image media pagebreak | insertdatetime preview | forecolor backcolor code",
#248945
Edited, Feb 21, 2021 20:51
Scott Reed - Feb 22, 2021 8:48
ah yes I didn't notice the epi-link was in the wrong section. It's strange that he tried my configuration and it still didn't work tho, weird.
* 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.