EPiServer Languages Add-On requires replacePrincipal=”true”

Just a short reminder to me and maybe to you that EPiServer Languages Add-On (1.1.1.7514) requires currently replacePrincipal=”true” in virtualRoles configuration.

Longer story: Needed to test some multi-language related idea. So I dediced to create a POC about it and fastest way is to create a new MVC Alloy site using the Visual Studio template. Happily updated NuGets and the database. Then I added the EPiServer Language Add-On. Added some languages in the admin configuration and enabled the languages on the Alloy site.

Navigated to the start page and added the Languages gadget to the side panel. The gadget title appeared but there was no options so I just reloaded the page but still nothing. Hmmm. Clicking the blocks showed sometimes the option to create content in other language but nothing happened when clicking the command. Opened Firebug console and reloaded the UI which immediately revealed that something is wrong:

NetworkError: 500 Internal Server Error
http://www.demositeaddresshere.com/EPiServer/EPiServer.Labs.LanguageManager/Stores/language/null

Looking at the error log of the site shows an entry:

ERROR EPiServer.Global: 1.2.5 Unhandled exception in ASP.NET
System.InvalidCastException: Unable to cast object of type 'System.Web.Security.RolePrincipal' to type 'EPiServer.Security.VirtualRolePrincipal'.
   at EPiServer.Labs.LanguageManager.Controllers.LanguageStore.IsCurrentUserInAdminRole()

So something to do with the virtual roles and looking at web.config (episerver.framework section):

<!-- this is the default virtual roles config by the VS template -->
<virtualRoles addClaims="true">
  <providers>
	<add name="Administrators" type="EPiServer.Security.WindowsAdministratorsRole, EPiServer.Framework" />
	<add name="Everyone" type="EPiServer.Security.EveryoneRole, EPiServer.Framework" />
	<add name="Authenticated" type="EPiServer.Security.AuthenticatedRole, EPiServer.Framework" />
	<add name="Anonymous" type="EPiServer.Security.AnonymousRole, EPiServer.Framework" />
	<add name="CmsAdmins" type="EPiServer.Security.MappedRole, EPiServer.Framework" roles="WebAdmins, Administrators" mode="Any" />
	<add name="CmsEditors" type="EPiServer.Security.MappedRole, EPiServer.Framework" roles="WebEditors" mode="Any" />
	<add name="Creator" type="EPiServer.Security.CreatorRole, EPiServer" />
	<add name="PackagingAdmins" type="EPiServer.Security.MappedRole, EPiServer.Framework" roles="WebAdmins, Administrators" mode="Any" />
  </providers>
</virtualRoles>

Then I remembered that I’ve had this issue already earlier and it was about replacing the principal. So looking at the virtual roles documentation and changing the configuration to:

<virtualRoles addClaims="false" replacePrincipal="true">
...
</virtualRoles>

fixes the issue and the Languages Add-On works as it should 😉

Footer note: Yes I used ILSpy first to have a look at the EPiServer.Labs.LanguageManager.Controllers.LanguageStore.IsCurrentUserInAdminRole() method ;D

TinyMCE version in EPiServer removes div elements

Background: customer wanted to add a 3rd party embedded element in the EPiServer TinyMCE editor but wasn’t able to.

The “code” is very simple and it really should work. Here is the demo code:

<div data-somecustomvar="1234567890" style="width:400px; height:283px;" class="someclass"></div>
<script type="text/javascript" src="//www.somedomain.net/embedcode.js" async="true"></script>

So DIV is where the 3rd party script injects its stuff.

When you paste that to the TinyMCE editor using the HTML source button and click the update and then again open the HTML source the code has changed to:

<div class="someclass" style="width: 400px; height: 283px;" data-somecustomvar="1234567890"></div>
<p>
<script type="text/javascript" src="//www.somedomain.net/embedcode.js" async="true"></script>
</p>

So the script tag is wrapped inside P element we can live with that. But when you click the EPiServer all properties view button and have a look at the editor field HTML source the DIV element is removed leaving us with only:

<p>
<script type="text/javascript" src="//www.somedomain.net/embedcode.js" async="true"></script>
</p>

My friend Google found me a fellow EPiServer developers post about the same thing but without any replies. Finally I found the same kind of bug report in TinyMCE and another post in the TinyMCE forums. The bug should have been fixed in version 3.5.x dated 2012-xx-xx (Fixed bug where the table plugin would delete the last empty block element in the editor). Also EPiServer states that supported TinyMCE version currently is 3.5.11 but looking at the tiny_mce_src.js file in EPiServer.Cms.Shell.UI.zip (/util/Editor/tinymce -folder, EPiServer version 7.19.1.0) shows that the version is 3.3.9.3 and not the said supported version 3.5.11. We can’t just replace the TinyMCE with the said supported version as the edit mode loads the stuff from the zip file.

So I found 2 simple workarounds that worked with this 3rd party “plug-in”.

First one was to change the DIV element to P element like this:

<p data-somecustomvar="1234567890" style="width:400px; height:283px;" class="someclass"></p>
<script type="text/javascript" src="//www.somedomain.net/embedcode.js" async="true"></script>

Rendered result stays almost the same except that non-breaking-space is rendered inside the P element.

Second workaround was to add empty P element inside the DIV element like this:

<div data-somecustomvar="1234567890" style="width:400px; height:283px;" class="someclass"><p></p></div>
<script type="text/javascript" src="//www.somedomain.net/embedcode.js" async="true"></script>

Rendered result stays again almost the same except again the non-breaking-space is rendered inside the P element (which is now inside the DIV element).

So hopefully this helps you if you have a similar issue while we wait for EPiServer to update the used TinyMCE at least to the said supported version 😉