Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Display image as block in TinyMCE


When I drag an image into a content area it gets rendered using a template located at /Shared/DisplayTemplates/. When I drag a block into the TinyMCE editor it gets rendered using its template. When I drag an image into the TinyMCE editor it doesn't get rendered with the template located at /Shared/DisplayTemplates.

Is there a way to achieve this? Or another way to alter the way an image is rendered when added with the TinyMCE editor?

May 15, 2014 15:20

What model do you have in your displaytemplate? 
Can you write the code here?

May 15, 2014 15:46

Nothing more magical than

@model EPiServer.Core.ContentReference
@if (Model != null)
    <img src="@Url.ContentUrl(Model)" />

The problem isn't the template, but the fact that images are handled different than blocks by the TinyMCE editor.

When you drag a block into TinyMCE it gets handled like this:

But images are handled like, well, images. I want them to be handled like blocks.

Edited, May 15, 2014 16:26

I think you might have to specify two displaytemplate, one for mediafile like this ( and one for the old way since it seems like it is handle the old way in TinyMCE.
I have not been able to try it myself, but will do soon.

May 15, 2014 16:37
May 15, 2014 16:37

Seems to be exactly what I'm looking for, Per Magne. Thanks!

May 15, 2014 16:41

Thanks Per Magne, now I know what to do.

May 15, 2014 16:48

You're welcome!

May 15, 2014 18:28
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.