Personalization of rich-text editor (tinymce) disappearing

Vote:
 

In a rich-text editor I am marking some text and clicking the Personalized Content button. I am then choosing which visitor group that should see the text.

But when I have published these changes and go back to the rich-text editor, all the personalization settings I just added are gone. Instead the name of the visitor group has been added as text.

Has anyone had a similar problem before? Or am I just misunderstanding how to work with personalization of the tinymce?

I am using episerver CMS 11.20.7 and also the episerver visitorgroupscriteriapack 2.0.1.

#263931
Sep 27, 2021 12:55
Vote:
 

Hi,

You are following the correct steps.

  1. Is there anything in the browser console or the log file?
  2. Are you using the default visitor group those are out-of-box available or any custom visitor group. If custom then try any out-of-box visitor group.
#263933
Sep 27, 2021 13:34
Vote:
 

Hello,

There are no error messages in the browser. Which log file should I look in?

I tried applying a out-of-the box visitor group, and the results is the same: After publishing the block and scrolling down to the rich-text area, there is just a p-tag added with the name of the visitor group.

#264007
Sep 28, 2021 11:37
Vote:
 

After reading the episervererrors file I can see that this error is happening:

System.AggregateException: One or more errors occurred. ---> System.InvalidOperationException: No visitor group matching the name of the visitor group role could be found

How come I get this message when I was able to choose the visitor group in the gadget of the rich-text editor?

#264008
Sep 28, 2021 11:51
Vote:
 

Try reinstalling visitorgroupscriteriapack package

#264014
Sep 28, 2021 12:20
Vote:
 

Reinstalling visitorgroupscriteriapack did not work and downgrading it from 2.0.1 to 2.0.0 did not work either.

Also another bug I have noticed is that once I have marked some text in the rich-text editor, and then try to move the personalized text snippet, it just disappears and what is left is the text snippet and the name of the visitor group that gets added above the text. This is the same as happens when I publish the content.

#264015
Sep 28, 2021 13:14
Vote:
 

The initialization module for the rich-text editor looks like this below.

If I remove that code altogheter, the personalization of the tinymce works. But when the code below runs, that's when the above mentioned bug starts showing.

using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.Security;
using EPiServer.ServiceLocation;
using If.OpenPages.Core.Repositories.StaticContent;
using If.OpenPages.Web.EPi.PageTypes;
using If.OpenPages.Web.EPi.PageTypes.BlockTypes;
using If.OpenPages.Web.EPi.PageTypes.BlockTypes.CommunicationGuidelines;
using If.OpenPages.Web.EPi.PageTypes.BlockTypes.Product;

namespace If.OpenPages.Web.Configuration.TinyMCE
{
    [ModuleDependency(typeof(TinyMceInitialization), typeof(EPiServer.Cms.Shell.InitializableModule), typeof(ServiceContainerInitialization))]
    public class CustomizedTinyMceInitialization : IConfigurableModule, IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
        }

        public void Uninitialize(InitializationEngine context)
        {
        }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            if (context != null)
            {
                context.Services.Configure<TinyMceConfiguration>(config =>
                {
                    config.Default().AddPlugin("epi-personalized-content");
                    config.Default().AppendToolbar("epi-personalized-content");

                    // Load global CSS
                    var staticContentRepository = ServiceLocator.Current.GetInstance<IStaticContentRepository>();
                    var globalCss = staticContentRepository.GetComponentUrl("global-css", StaticContentFileType.Css);
                    string[] contentCss;
                    string[] bigTextContentCss;
                    if (!string.IsNullOrEmpty(globalCss))
                    {
                        contentCss = new[] { globalCss, "/Static/admin/css/TinyMceClasses.css" };
                        bigTextContentCss = new[] { globalCss, "/Static/admin/css/TinyMceBigTextClasses.css" };
                    }
                    else
                    {
                        contentCss = new[] { "~/Static/admin/css/TinyMceClasses.css" };
                        bigTextContentCss = new[] { "/Static/admin/css/TinyMceBigTextClasses.css" };
                    }

                    string toolbarFirstRow = "epi-link anchor |  cut copy paste pastetext pasteword | fullscreen";
                    string heroIntroToolRow = "bold epi-link | cut copy paste pastetext";

                    var formats = new
                    {
                        removeformat = new object[]
                        {
                            new{
                                selector =
                                    "b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins,h1,h2,h3,h4,h5,h6",
                                remove = "all", split = true, expand = "false", block_expand = true, deep = true
                            }
                        }
                    };


                    config.Default()
                        .AddEpiserverSupport()
                        .Toolbar(toolbarFirstRow, "bold italic | bullist numlist formatselect removeformat undo redo styleselect")
                        .BlockFormats("Styles=p;H2=h2;H3=h3;")
                        .ContentCss(contentCss)
                        .StyleFormats(new { title = "Ordered list without indent", selector = "ol", styles = new { padding = "0rem 1.25rem" } },
                            new { title = "Unordered list without indent", selector = "ul", styles = new { padding = "0rem 1.25rem" } })
                        .AddSetting("valid_elements", "strong,b,em,i,a[*],ul[style],ol[style],li,h2,h3,h4,h5,br,p,blockquote[class]")
                        .AddSetting("formats", formats)
                        //.AddSetting("forced_root_block", false) // If you set this option to false it will never produce p tags on enter or automatically it will instead produce br elements and Shift+Enter will produce a p.
                        .Height(200)
                        .Width(600);

                    if (PrincipalInfo.CurrentPrincipal.IsInRole("WebDevelopers"))
                    {
                        config.Default().AddPlugin("code");
                        config.Default().AppendToolbar("code");
                    }



                    var introTiny = config.Default().Clone().AddSetting("valid_elements", "a[*],p,br").Toolbar(toolbarFirstRow);
                    var bannerText = config.Default().Clone()
                        .Toolbar(toolbarFirstRow, "bold italic | bullist numlist styleselect undo redo")
                        .StyleFormats(new { title = "Lead text", block = "p", classes = "if text lead" })
                        .AddSetting("extended_valid_elements", "p[class]");
                    var heroIntroTiny = config.Default().Clone().AddSetting("valid_elements", "a[*],strong,p,br").Toolbar(heroIntroToolRow);
                    var newHeadStyleTiny = config.Default().Clone().BlockFormats("Styles=p;H2=h2;H3=h3;H4=h4;H5=h5");

                    config.For<ProductPage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<NewsPage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<SitePage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<CategoryPage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<ArticlePage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<ProductCategoryMarketingPage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<ProductGroupPage>(exp => exp.MainBody, newHeadStyleTiny);
                    config.For<ComponentImageBlock>(exp => exp.LeftColumnText, introTiny);
                    config.For<ComponentImageBlock>(exp => exp.RightColumnText, introTiny);
                    config.For<ComponentTypeBlock>(exp => exp.Introtext, introTiny);
                    config.For<CategoryPage>(exp => exp.IntroText, introTiny);
                    config.For<CommunicationGuidelinePage>(exp => exp.IntroText, introTiny);
                    config.For<CustomerContactStartPage>(exp => exp.IntroHeading, introTiny);
                    config.For<CustomerContactStartPage>(exp => exp.IntroLeadText, introTiny);
                    config.For<CustomerContactStartPage>(exp => exp.IntroText, introTiny);
                    config.For<ProductGroupPage>(exp => exp.IntroText, introTiny);
                    config.For<ProductPage>(exp => exp.IntroText, introTiny);
                    config.For<ProductHeroBlock>(exp => exp.IntroText, heroIntroTiny);
                    config.For<SimpleHeroBlock>(exp => exp.IntroText, heroIntroTiny);
                    config.For<SimpleHeroNavigationBlock>(exp => exp.IntroText, heroIntroTiny);
                    config.For<TextContainerBlock>(exp => exp.Infobox, newHeadStyleTiny);
                    config.For<TextContainerBlock>(exp => exp.Text, newHeadStyleTiny);
                    config.For<TextContainerBlock>(exp => exp.Text2, newHeadStyleTiny);
                    config.For<BannerBlock>(exp => exp.Content, bannerText);
                    config.For<BannerBlock>(exp => exp.Content2, bannerText);
                });
            }
        }
    }
}
#264095
Edited, Sep 29, 2021 9:27
Vote:
 

When loading the page in edit mode that has the rich text editor I get this warning in the console:

DevTools failed to load source map: Could not load content for http://openpages/EPiServer/EPiServer.Cms.TinyMce/2.8.1/ClientResources/tinymce/skins/lightgray/skin.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

When trying to move the personalized text inside the rich-text editor I get this varning in the console:

VM8865 dojo.js:15 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

#264097
Sep 29, 2021 10:01
Vote:
 

By removing intialization module if personalization works then try to comment out some lines at a time and try to identify which line of code causing this problem

I guess either "valid_elements" or custom css might be causing this issue so try to comment out that as well.

#264098
Sep 29, 2021 10:10
Vote:
 

Alright, it was the .AddSetting("valid_elements", "a[*],p,br") that caused the personalization of the tinymce not to work in edit mode. But how come? 

We still want to set valid elements I guess, and how should I do that now? Could I use the extended_valid_elements instead or does that work differently?

Again, thanks for your help so far!

#264126
Sep 29, 2021 14:32
Vote:
 

Ok great !

When you add personalization it basically add additional divs/sections tags arround your text.

Example - 

This is original text-

<p>Hello world</p>

After applying personalization the stucture will be - 

<div class="epi_pc" contenteditable="false" data-groups="d09acf91-3735-4b46-82f2-2a39ebbc9acd">
<div class="epi_pc_h">
<div class="epi_vg">Asian Audience</div>
</div>
<section class="epi_pc_content" contenteditable="true">Hello world</section>
</div>

So i guess if you add the tags into the "valid_elements" then it will work.

.AddSetting("valid_elements", "a[*],p,br,div[*],section[*]") 

Try this and let me know if it works

#264128
Sep 29, 2021 14:49
Vote:
 

Yes that worked, thanks!

#264133
Sep 29, 2021 16:38
* 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.