Uploaded images missing from TinyMCE image picker/Editor View

Drew Douglas

Vote:

I'm encountering a problem with a 7.5 MVC Commerce/CMS site (EPiServer 7.14.1, EPiServer.Cms.Shell.UI 7.14.0). When an editor uploads an image dragging an image into tinymce

they can drag it onto the editor. It shows up as a link (because it's a content reference?). However, it should show up as a picture, as it does in the example templates project. Also, when clicking the "Insert/Edit Image" button in tinyMCE, the picker doesn't show any files:

available images from tinymce

We've defined an ImageFile type inheriting indirectly from MediaData:

public class DefaultMediaData : MediaData
{
    public virtual string DisplayName { get; set; }
}

[ContentType(DisplayName = "Image", GUID = "81FC2421-B6E2-4D09-AE98-0D692B44C1A6")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png")]
public class ImageFile : DefaultMediaData
{
    [CultureSpecific]
    [Editable(true)]
    [Display(Name = "Alternate Text",
        Description = "Description of the Image",
        GroupName = SystemTabNames.Content,
        Order = 1)]
    public virtual string AltText { get; set; }
}

and indeed, hovering over the file reveals that ImageFile is the type of the content. I can get the content to display in a ContentArea or as a Property using a DisplayTemplate that is named ImageFile or Image (following this Ted + Gustaf post).

Can we still use the ImageFile type, which we're using for commerce assets, in TinyMCE editor? Or, do we need to define another inheritor of MediaData with a MediaDescriptor attribute specifying the file types we want to use in CMS?

Any suggestions would be appreciated.

#113089

Nov 12, 2014 22:01

Boban Miksin

Vote:

Had exactly the same problem with TinyMCE and after debuging the select content dialog I saw that it creates AJAX request in order to fetch the files:

http://localhost:49271/EPiServer/cms/Stores/contentstructure/?referenceId=3&query=getchildren&typeIdentifiers=episerver.core.icontentimage&typeIdentifiers=episerver.core.contentfolder&allLanguages=true&sort(+typeIdentifier,+name)&dojo.preventCache=1422438913386

It does return the folders but not the images. When invoking the same dialog from an Url page property, the AJAX request gets slightly different:

http://localhost:49271/EPiServer/cms/Stores/contentstructure/?referenceId=3&query=getchildren&typeIdentifiers=episerver.core.icontentmedia&typeIdentifiers=episerver.core.contentfolder&allLanguages=true&sort(+typeIdentifier,+name)&dojo.preventCache=1422438913386

From there I can see the folders and images.

It turns out that by default the TinyMCE will, for an image, request for episerver.core.icontentimage. Opening of the dialog from different places such as page edit will directly depend on the property UIHint, e.g. [UIHint(UIHint.MediaFile)]

Solution is to create new class:

[ContentType(DisplayName = "CustomImageData", GUID = "E3208A63-1FB9-4F5B-ACBC-B7CF90D460E2")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png")]
public class CustomImageData : ImageData
{
}

Every new image that you upload you will be able to select if from the TinyMCE image select content dialog. I'm not sure how can you change the existing images "to be type of image and not media".

#116305

Jan 28, 2015 11:48