WYSIWYG Editor - innerHTML makes all links absolute?

I'm using a WYSIWYG Editor based on the article and it's working great... Except, any relative links added in WYSIWYG mode become absolute after calling doToggleView().

So the relative URL...

<a href="xxx.htm">

becomes absolute...

<a href="http://devserver.com/dir/xxx.htm">

It is happeneing at the call to...

iView.document.body.innerHTML = iText;

Obviously this is not great for portability. Has anybody found a solution?

iText has the correct form of the URL. Also, if you save the document without calling the doToggleView(), it is saved correctly.

What about performing a Regular Expression on your output (replacing the absolute data) just before saving the data to your DB (or whatever...i.e. when you're done editing)

I tried that and it does sort of work.

document.editor.Body.value = oDiv.innerHTML.replace(/http:\/\/devserver.com/gi,'');

But it's hardly the right way to do it. It will eventually break, and when you're least expecting it...

I've noticed a couple of the commercial WYSIWYG editors do not have the problem, so I'm curious how the got around it. There must be a correct way. I'd also like to avoid the other tags it adds like <TBODY>.

I don't know enough about DOM-1 to know what the equivalent DOM-1 technique might be. I'd like a simple parsing of text>html without interpretation.

Hello PCarrol,

did you finally find any solution for relative links?

Okay - this seems like an old thread, but there is a solution to the problem.

When toggling from source to html, the innerhtml function changes all path links to absolute. Having tried to find a solution I discovered that;

if you select all the text in source mode, cut it and then paste it, when you switch back to html mode the links are untouched. Not sure why this works but hey.

so in my code - all i do is add the following just before it switches back to html mode.

cmdExec('selectall'); cmdExec('copy'); cmdExec('paste'); sTmp=idContent.document.body.innerText;
idContent.document.body.innerHTML=sTmp;

hope this helps anyone

Haha - what a great little hack! - Nice work pelfed!

I'm fairly new to javascript and I can't get your hack to work in my WYSIWYG editor. I've tried plugging it into every place in the toggle function, but I get errors messages "object expected." As you can see from the script below, I already have one fix in the toggle function to keep the HTML mode background white so the source can be seen if the page background is dark. Exactly where do I plug in your script?

var prevbg = null;
function doToggleView() {
if(viewMode == 1)
{
prevbg = (iView.document.body.style.background)? iView.document.body.style.background : null;
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;
if(prevbg) {
iView.document.body.style.background = "#FFFFFF"; }
viewMode = 2; // Code
}
else
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;
if(prevbg) {
iView.document.body.style.background = prevbg; }
viewMode = 1; // WYSIWYG
}
}

You're a genius! Works like a charm for relative links. I think I can even modify it to fix the problem of the editor using absolute paths for inserted images.

If you want a copy of the editor, let me know your email address and I will send it.

Thanks a lot,
Bill

I would love to know how the relative path to the images can be done!

Did you try Pelfeds hack? (post #5)