Blog about tips & tricks for CMS enhancement

eric.petersson

Add ImageVault buttons for the TinyMCE


If you are using ImageVault as your integrated DAM-solution for Episerver it might be a good idea to let your editors access the portal directly from the XHtmlString, the TinyMCE area in the edit mode.

A quick look with IlSpy tells the magic strings you are looking for are the ones below:

  • "imagevaultButton"
  • "imagevaultEditorButton"

Just add these to your custom TinyMCE settings as you normally would and you're good to go:

    [ServiceConfiguration(ServiceType = typeof(PropertySettings))]
    public class DefaultTinyMceSettings : PropertySettings<TinyMCESettings>
    {
        public DefaultTinyMceSettings()
        {
            DisplayName = "Custom TinyMCE settings with ImageVault buttons";
        }

        public override TinyMCESettings GetPropertySettings()
        {
            var settings = new TinyMCESettings();
            var firstToolbar = new ToolbarRow(new[]
            {
                "imagevaultButton", "imagevaultEditorButton"
            });

            settings.ToolbarRows.Add(firstToolbar);

            settings.Height = 300;
            settings.Width = 582;

            return settings;
        }

        public override Guid ID => new Guid("19F2DA6C-BF21-45C8-BED8-74A61A228D31");
    }

alt