November Happy Hour will be moved to Thursday December 5th.

Configure TinyMCE image editor

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
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
Vote:
 

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

#140441
Oct 20, 2015 11:15
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.