TinyMCE converts image paths to relative

David Linder

Vote:

For some images, TinyMCE won't allow the scr attribute to be saved with an absolute path. Upon publishing the page, the URL is converted to a relative path. I believe I should be able to prevent this via configuration (relative_urls or convert_urls set to false seem like good guesses), but I'm uncertain as to how I should implement this. I have, however, already successfully gotten rid of TinyMCE's stripping of iFrame, style, fb and other such tags with the help of this blog post (I'm thinking it's probably related):

http://www.frederikvig.com/2010/10/how-to-add-support-for-iframes-and-other-elements-to-tinymce-in-episerver-cms/

Any ideas? Thanks in advance!

#50023

Apr 08, 2011 17:54

Linus Ekström

Vote:

Hi!

I'm pretty sure that it's not Tiny MCE doing this but rather the permenent link functionality in EPiServer CMS. Links are converted to an internal format regardless if they are absolute and relative and when they are recreated to the site they get the relative path format. I'm not sure if and how this can be changed but I would dig into url rewrite providers.

#50028

Apr 11, 2011 8:51

David Linder

Vote:

Ok, I'll look into that then. Thanks!

#50636

May 05, 2011 19:16

Carl Howarth

Vote:

Hi David,

Did you manager to resolve this issue? We are experiencing the same problem.

We are using the TinyMCE editor to build email templates. When we insert an absolute URL (event directly into the HTML) it converts it to a relative path as soon as you update the editor.

Many thanks

Carl

#56958

Feb 17, 2012 13:50

Michael Ajibowu

Vote:

Does anybody have the solution to this?

#64525

Dec 27, 2012 14:55

Johan Petersson

Vote:

Hi,

If you want to rewrite all links in a string to it's external representation you could use the RewriteString() function;

public static string RewriteUrlsToFriendly(this string input, bool absoluteUrls)
{
    if (absoluteUrls)
    {
        // Make url's absolute
        input = Regex.Replace(input, "<img(.*?)src=\"/", "<img$1src=\"" + EPiServer.Configuration.Settings.Instance.SiteUrl.ToString(), RegexOptions.IgnoreCase | RegexOptions.Compiled);
        input = Regex.Replace(input, "<a(.*?)href=\"/", "<a$1href=\"" + EPiServer.Configuration.Settings.Instance.SiteUrl.ToString(), RegexOptions.IgnoreCase | RegexOptions.Compiled);
    }

    var toExternal = new FriendlyHtmlRewriteToExternal(UrlBuilder.RebaseKind.ToRootRelative);

    return toExternal.RewriteString(
        new UrlBuilder(HttpContext.Current.Request.Path),
        new UrlBuilder(HttpContext.Current.Request.RawUrl),
        HttpContext.Current.Response.ContentEncoding,
        input);
}

If you don't have a HttpContext I guess you can instantiate empty UrlBuilders and also set the econding to UTF-8.

#64528

Dec 27, 2012 16:06

Carl Howarth

Vote:

Thanks Johan. Your solution works like a charm.

If this doesn't work you may find that TinyMCE is using Relative URLs (default option). To fix this you can add the following configuration option to your TinyMCE editor:

tinyMCE.init({
        ...
        relative_urls :false
});


as described here: http://www.tinymce.com/wiki.php/Configuration:relative_urls


Oh and Happy New Year!

#64563

Jan 02, 2013 13:37