Configure TinyMCE image editor

Kristian Ledung

Vote:

Hi!

I need to remove the two tabs "Appearance (Utseende)" and "Advanced (Avancerat)" from TinyMCE: s insert/edit image and would like to know the best way to do this and how to do this.

In an earlier project we edited the html-file for the image editor but that file is always overriden in an episerver upgrade.

Thanks.

/Kristian

#140411

Oct 19, 2015 13:57

Mattias Olsson

Vote:

Hi!

I hope there is a better way than this "hack" I'm about to suggest. :) However, it works and an EPiServer upgrade won't mess with it.

1. Add the VirtualPathMappedProvider to the <episerver.framework> section:

<virtualPathProviders>
    <add name="EPiServerUrlMappingVPP" type="EPiServer.Web.Hosting.VirtualPathMappedProvider, EPiServer.Framework" />
</virtualPathProvider>

2. Take a copy of the dialog.css file that is being used for the image dialog and put it in your project. Mine is in the zip file (modules/_protected/CMS/EPiServer.CMS.Shell.UI.zip) and is located at "8.2.2.0/ClientResources/editor/tiny_mce/advanced/skins/epi-light/dialog.css

3. Add this to the end of your copy:

#appearance_tab,
#advanced_tab {
    display: none;
}

4. Add a virtual path mapping to the <episerver.framework> section:

<virtualPathMappings>
    <add url="~/[YourPathToCmsUI]/[CmsUIVersion]/ClientResources/Editor/tiny_mce/themes/advanced/skins/epi-light/dialog.css" mappedUrl="~/[ThePathToYourCopy]/dialog.css" />
</virtualPathMappings>

#140429

Edited, Oct 20, 2015 8:47

Kristian Ledung

Vote:

Thanks for your help. This "hack" works for me.

#140441

Oct 20, 2015 11:15