text-editorkenticokentico-mvckentico-12

Text editor links leading with ~ character and images are not rendering correctly

I am running Kentico 12.0.24 MVC and there is an issue how the inserted images render using the text editor.

When inserting images using the Text editor in Kentico CMS, I am able to see the inserted images inside the Text Editor, but when viewing on the front-end page the images do not render and this is due to how the image path is generated with a leading ~ (tilde) character.

The generated image path is relative, which is fine but is the leading tile that breaks it.

Here are the steps to reproduce this:
1. In Kentico CMS, go to a page that has a Rich text editor (WYSIWYG).
2. In the text editor, click on the button called "Insert/Edit image or media".
3. In the popup window, click on the tab called "Media Libraries".
4. From the list, I select an image. At this point, the URL image URL preview will be as follow "/Admin/IPGLaserSystems/media/Random/application-non-contact-1x.jpg".
5. I click on "Save & Close", I am able to see the image inserted in the text editor.
6. Click "Save" at the top.
7. I navigate to the page and the image goes not show and at this point the generated image path is as follow "~/IPGLaserSystems/media/Random/application-non-contact-1x.jpg".

If the tilde character is removed from the path, then it renders the image fine. This should work natively.

I also found the following article, that seems to address the insertion of links from text-editor in relative form, but doesn't seems to directly address the issue with using relative (tilde-based) links in general: https://devnet.kentico.com/articles/how-to-fix-links-inserted-via-a-wysiwig-editor-in-kentico-12

Please advise, thank you.

Solution

  • You can access them like this. Let's say that you have a model item with property image. In your views you can access this like this

    @Html.Kentico().ResolveUrls(item.image)

    See if this works. I use this always. The good things about this is that let say you have a wysiwyg area with lot of images in it. For example, you have a model item with property textarea. Using an expression like this on your views will resolve all images in the wysiwyg area.

    @Html.Kentico().ResolveUrls(item.TextArea)