htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
wrong image path when pasting html into editor


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


skanky
New User

Mar 3, 2004, 5:02 AM

Post #1 of 8 (3819 views)
Shortcut
wrong image path when pasting html into editor Can't Post

hi,

i have a problem when pasting images copied from another website into htmlarea. the path of the images is always changed from the right absolute url to a relative url based on my own server, which is not correct.

for example (right url):

<img src="href="http://www.spiegel.de/img/0,1020,334921,00.jpg" />

after pasting image into the editor:

<img src="/img/0,1020,334921,00.jpg />

do you have an idea how to fix that?



thanks in advance,

sven


skanky
New User

Mar 4, 2004, 3:33 AM

Post #2 of 8 (3797 views)
Shortcut
Re: [skanky] wrong image path when pasting html into editor [In reply to] Can't Post

is this the normal behavior of htmlarea or is it a bug? i have tried to find a reason, but i did not succeed.

annotation: if i use the fullpage-plugin, then all images are pasted with the correct path to the external domain. but i do not want to edit a whole page, so i can't use this plugin...

cu sven


kimss
User

Mar 25, 2004, 8:50 AM

Post #3 of 8 (3701 views)
Shortcut
Re: [skanky] wrong image path when pasting html into editor [In reply to] Can't Post

I just experienced the same annoying problem.

My editor is placed like this :
/admin/htmlarea.*

The images are placed like this :
/admin/files/thumb/*

Problem is content is shown from here :
/content.*

When images are inserted the path gets "customized" for the editor placement, meaning
I insert the following path : ...src="/admin/files/thumb/foo.gif"... but the accuall code
stored in the HTMLArea gets ...src="files/thumb/foo.gif"... ?

If I manually correct the code in TEXT mode, the page is stored correcty. Reloading the
page and letting HTMLArea initialize renders all the links back to "files/thumb/*"

This is kinda annoying since this means that the images wont work from the location they
are accually shown from.

Right now ill just enter a "bad" php hack that physically replaces all occurencies of "files/thumb" with "/admin/files/thumb". When and if I find the collution for this Ill be sure to post it, it might just be me that havnt figured out the object model in HTMLArea yet.

Kim Steinhaug

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


kimss
User

Mar 25, 2004, 9:12 AM

Post #4 of 8 (3700 views)
Shortcut
Re: [kimss] wrong image path when pasting html into editor [In reply to] Can't Post

I found the sollution for this, you need to alter the htmlarea.js main file :

Since ive done several modifications I cant referr to line numbers, instead ill give you unique search referrers you can look up :

1. Search for : HTMLArea.prototype._insertImage
Look for this line :
f_url : HTMLArea.is_ie ? editor.stripBaseURL(image.src) : image.getAttribute("src"),

We will here create a new stripBaseURL function, so replace line with this :
f_url : HTMLArea.is_ie ? editor.stripBaseURLimage(image.src) : image.getAttribute("src"),

This is the code that manipulates the url link when inserting / editing an image with the popup.

2. Search for : if (HTMLArea.is_ie && (name == "href" || name == "src")) {
This if statement should be rewritten, so that we seperate the href and src statement, so
replace the following code :

if (HTMLArea.is_ie && (name == "href" || name == "src")) {
value = editor.stripBaseURL(value);
}


With this code :

if (HTMLArea.is_ie && (name == "src")) {
value = editor.stripBaseURLimage(value);
}
if (HTMLArea.is_ie && (name == "href")) {
value = editor.stripBaseURL(value);
}


As you see Ive devided the if statement into two statements, one for each. The above code
is the reason all links get altered when initializing the page.

3. Search for : HTMLArea.prototype.stripBaseURL = function(string) {
This function is nicely commented with two parts, and the first part is the one we dont
need. So we duplicate the function and give it a new name, to meke it bulletproof reaplce this:

HTMLArea.prototype.stripBaseURL = function(string) {
var baseurl = this.config.baseURL;


// strip to last directory in case baseurl points to a file
baseurl = baseurl.replace(/[^\/]+$/, '');
var basere = new RegExp(baseurl);
string = string.replace(basere, "");


// strip host-part of URL which is added by MSIE to links relative to server root
baseurl = baseurl.replace(/^(https?:\/\/[^\/]+)(.*)$/, '$1');
basere = new RegExp(baseurl);
return string.replace(basere, "");
};


Replace this with (note the same code is duplicated and altered)

HTMLArea.prototype.stripBaseURL = function(string) {
var baseurl = this.config.baseURL;


// strip to last directory in case baseurl points to a file
baseurl = baseurl.replace(/[^\/]+$/, '');
var basere = new RegExp(baseurl);
string = string.replace(basere, "");


// strip host-part of URL which is added by MSIE to links relative to server root
baseurl = baseurl.replace(/^(https?:\/\/[^\/]+)(.*)$/, '$1');
basere = new RegExp(baseurl);
return string.replace(basere, "");
};
HTMLArea.prototype.stripBaseURLimage = function(string) {
var baseurl = this.config.baseURL;
// strip host-part of URL which is added by MSIE to links relative to server root
baseurl = baseurl.replace(/^(https?:\/\/[^\/]+)(.*)$/, '$1');
basere = new RegExp(baseurl);
return string.replace(basere, "");
};


- - - - - - - - - - - - - - - - - - - - - - -

Regards,
Kim Steinhaug

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


rcherny
Novice

Apr 5, 2004, 8:15 AM

Post #5 of 8 (3634 views)
Shortcut
Re: [kimss] wrong image path when pasting html into editor [In reply to] Can't Post

Kim,
IE is also getting some relative links wrong. Could the code you come up with fix that as well?

For instance, my content has a link such as "../products" and the editor lives in "/admin/".

When I click the link or save it in IE, the link is changed to "/admin/products/".

Any thoughts? Should the stripBaseURL function be changed in general or am I missing the point of what your code is doing? I actually haven't messed with Inserting Images much as the editor set up I'm doing now doesn't have the Insert Image button showing ...

thanks as always,
:rob


kimss
User

Apr 5, 2004, 9:16 AM

Post #6 of 8 (3631 views)
Shortcut
Re: [rcherny] wrong image path when pasting html into editor [In reply to] Can't Post

I pretty sure that if you do the same hack for the link insertion as for the image you would solve it. As with the image insertion there is a function that alters the relative URL, I would suspect that the same thing is done with the link insertion.

As mentioned I havnt looked into this, but Im 99% confident that this would be the case.

Kim Steinhaug
kim-at-steinhaug-dot-com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
www.steinhaug.com - www.easywebshop.no - www.webkitpro.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Norwegian office : +47 88 00 92 45, Swedish office : +46 31 704 43 40
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


rcherny
Novice

Apr 5, 2004, 12:19 PM

Post #7 of 8 (3625 views)
Shortcut
Re: [kimss] wrong image path when pasting html into editor [In reply to] Can't Post

I'm not sure Kim, but I may have misunderstood what your code was doing or what the problem was with the images paths.

For links I'm still getting the same thing whether I change the code or not. I put your code from under

HTMLArea.prototype.stripBaseURLimage

and the same thing I describe above happens. Looking closer it seems to be the same code as stripBaseURL minus the "// strip to last directory" section being there.

What there needs to be is some code which can see if the path in there is relative or not, and leave it alone, or better yet strip out the directory where the admin section is instead of the content.

In my case I was using relative paths for links because our staging server was in a sub-directory (problem) while the full-on server was not (not a problem). Otherwise I'd just use "/my/linked/file.php" or whatever.

I don't know any sophisticated regex, so I'm not much help here ...


gouan2
New User

Jan 13, 2005, 2:09 AM

Post #8 of 8 (2999 views)
Shortcut
Re: [rcherny] wrong image path when pasting html into editor [In reply to] Can't Post

Hi kimss,
Wouah! These are hell of explanations. Clear as can be!
Alas, I'm still having the problem although i used your precious infos but it doesn't change anything. The problem of path with img.src only occurs when i edit the image again.Crazy
At first, I'm selecting an image, the preview is ok and it goes to the main frame ok.
But when i want to edit the image again and bring back the popup, it's all well filled BUT when i press ok, then, the path is broken and i have an unwanted code i Can't get rid off, hence no image on the editor. The alert(param["f_url"]) is good but simply doing img.src = param["f_url"] changes everything and corrupt the link...Unsure
I could see on the forum lots of similar questions/problems but there are no solutions..
Or is it?

Gwenal

 
 
 


Search for (options)