Configuration - TinyMCE

Configuration of CSS files used in TinyMCE

Like the “old editor” the TinyMCE editor in EPiServer CMS 6 reads in external CSS files and there are three ways to configure which CSS files TinyMCE should use. Listed in the order of importance these are:

• Content CSS path in settings of PropertyXHTMLStringControl.
• Dynamic property on page UIEditorCSSPaths (could be inherited from parent page).
• Site settings configuration UIEditorCSSPaths.

All configuration settings accept a comma separated list of URLs to CSS files where each URL starts with / or ~.

The latter two are the same as in EPiServer CMS 5 and in EPiServer CMS 6 these are shared with the old editor, this means that if you are using both the old editor (CMS 5) and new TinyMCE editor, they both read in the same CSS files (if using site settings configuration or using/reading from the same dynamic property).

The first option, setting Content CSS path in PropertyXHTMLStringControl, provides the possibility to specify different CSS files for different editors in the same page as well as specifying global settings. This is also a way to avoid conflicts when using both the old editor and the TinyMCE editor on the same Web site.

Note that the TinyMCE editor does not have the same capabilities as the old editor has in reading certain CSS classes for certain elements by specifying for example: img.myImgClass. In TinyMCE all classes will be available for all types of elements. Specifying Editormenuname in the CSS class does not make any sense for TinyMCE. The CSS support in TinyMCE will probably be improved in future versions/releases.

Enabling the tinyMCE XHTML editor for non-authenticated users

When installing an EPiServer CMS 6 site the XHTML editor cannot be used on template pages unless the current user is logged in and has access to the EPiServer UI. The reason for this is that the editor is reliant on resources located in EPiServer Shell, which reside under the configurable “secret” path and are not publicly available in the default configuration.
To make these resources available publicly a few configuration changes need to be carried out, see below:

1. Configure the EPiServer Shell module to deliver its client resources in a publicly available location on the site.
   In the Web config file locate the module named Shell in the episerver.shell/protectedModules configuration section and configure the clientResourcePath attribute:
     <protectedModules rootPath=" ... ">
    <add name="Shell" clientResourcePath="~/public/Shell/" />
    <add name="CMS" />
  </protectedModules>
   
2. Map EPiServer Shell client resources to this location with a virtual path configuration directive.
   Locate the /configuration/episerver/virtualPath/provider section in web.config. There you will find a virtual path mapping named EPiServerShell that maps the episerver framework UI files into the application. This typically looks like the directive below:
    <add virtualPath="~/EPiServer/Shell" 
   physicalPath="C:\Program Files\EPiServer\Framework\<version>\Application\UI" 
   name="EPiServerShell"
   type="EPiServer.Web.Hosting.VirtualPathNonUnifiedProvider,EPiServer" />
   You now have to add a similar directive that exposes the clientresources folder publicly. This should look similar to the one below:
    <add virtualPath="~/public/Shell/ClientResources" 
   physicalPath="C:\Program Files\EPiServer\Framework\<version>\Application\UI\ClientResources" 
   name="EPiServerShell"
   type="EPiServer.Web.Hosting.VirtualPathNonUnifiedProvider,EPiServer" />
   
3. Add a location directive for the public location. This is required to register the static file handler for the public location. The static file handler must be registered for the resource files mapped with the virtual path provider to be delivered to the client.
    <location path="public">
   <!-- For IIS 7 -->
   <system.webServer>
     <handlers>
       <clear />
       <add name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
       <add name="PageHandlerFactory-Integrated" path="*.aspx" verb="GET,HEAD,POST,DEBUG" type="System.Web.UI.PageHandlerFactory" modules="ManagedPipelineHandler" scriptProcessor="" resourceType="Unspecified" requireAccess="Script" allowPathInfo="false" preCondition="integratedMode" responseBufferLimit="4194304" />
       <add name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
     </handlers>
   </system.webServer>
   <!-- For IIS 5/6 -->
   <system.web>
     <httpHandlers>
       <add path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" validate="true" />
       <add path="*.aspx" verb="*" type="System.Web.UI.PageHandlerFactory" validate="true" />
       <add path="*" verb="*" type="EPiServer.Web.StaticFileHandler" validate="true" />
     </httpHandlers>
   </system.web>
 </location>