Rewrite urls from user submitted HTML

Question

Hi, I use one WYSIWYG editor in a small cms. It allows users to upload files, images, etc. If I add image named dog.jpg, in source I'll get:

<img src="/myweb/userfiles/images/dog.jpg" />

I can save this to a database and use it later on any page, until I move my site to a live domain.

myweb is virtual directory in IIS. "/" points to root, in this case localhost, so I have to use "/myweb". However when I upload site to server and copy database there, all links will be broken, because there is no "myweb" folder on server.

My idea was to replace "/myweb" on save with empty string. I also have to replace full url, which editor creates for some files. On display I would have to add correct Application dir. I would probably save both versions in database, and only on server change force display version to update.

By now I've come up with:

p = p.Replace("href=\"" + fullUrl, "href=\"").Replace("src=\"" + fullUrl, "src=\"").Replace("href=\"" + partialUrl, "href=\"").Replace("src=\"" + partialUrl, "src=\"");

Which is ugly, hard to maintain and inefficient. I guess better approach would be to use regex, but I don't know how to do it.

My question is, can anyone recommend good article, blog/forum post on this? If you have other solution, great.

Answer 1

Store the local root path separately from the images. For each image, store the relative path to that image.

When displaying images locally, use the local root merged with the relative path. When you publish to the remote server, you add the remote root to the relative path.

Answer 2

I am unsure the regex version has any of the characteristics you mention in this case.

That said, you can do:

    string ReplaceUrlPaths(string html, string partialPath, string fullPath)
    {
        var pattern = string.Format("((href|src)=\")({0}|{1})", partialPath, fullPath);
        var regex = new Regex(pattern);
        return regex.Replace(html, m => m.Groups[1].Value);
    }
    [TestMethod]
    public void TestMethod10()
    {
        var input = @"<img src=""/myweb/userfiles/images/dog.jpg"" />";
        //carefull with any special regex char in the paths
        var replaced = ReplaceUrlPaths(input, "/myweb", "/some/full/path"); 
        Assert.AreEqual(
            @"<img src=""/userfiles/images/dog.jpg"" />", 
            replaced);
    }

If you are proceeding with that, refactor it to instantiate the regex once with the compile option(as the partialPath and fullPath won't be changing).

Also consider avoiding it all, by defining a web site with an alternate port to just have it as a root Url.

Answer 3

Does your WYSIWYG editor allow you to configure the base URL e.g. so that paths to images can use relative paths? I think the FCKEditor has something like FCKConfig.BaseHref in it's config file that does something like this.

Alternatively can you run the site as a root site using the ASP.NET 2.0 web server? Then you wouldn't have to worry about rewriting paths to images as you could just use paths from the webroot.