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.

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.

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?

Try reinstalling visitorgroupscriteriapack package

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.

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);
                });
            }
        }
    }
}

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/.

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.

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!

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

Yes that worked, thanks!