TinyMCE converts image paths to relative

 

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
    Member since: 2002
     

    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
  •  

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

    #50636 May 05, 2011 19:16
  •  

    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
  •  
    Does anybody have the solution to this?
    #64525 Dec 27, 2012 14:55
  • Johan Petersson
    Member since: 2007
     

    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
  •  

    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