Adding backround url() with a relative path in the body replace to fullpath

[Deb]

I have added a plugin to add background image in the html file from the file browser, i am using setStyle() method to add the url and its working fine.

The problem is, My image link is a relative path but while saving the html text or if i check the source the url is converted to full path. Any idea, how to use the relative path in url().

[Jakub Ś]

1. In which browser do you get this (IE only maybe)?
2. Please provide exact steps to reproduce?
3. Have you got window.CKEDITOR_BASEPATH set?

[Deb]

Thanks for your quick reply.

I am using Chrome ver: 26

and using below code to update the background Image of the html body.

editor.document.getBody().setStyle('background', 'url(../../abc.png)');

but in source I can see the full url of the image like "​http://www.mysite.com/a/b/abc.png" which i don't want. any quick solution to update the style with the relative path what I am adding without the Base Path. I have to use the same file in different places so i need the relative url only.

[Deb]

What i checked is, in the Ckeditor.js file, in setStyle() function,

this.$.style[e.cssStyleToDomStyle(l)] = m;

if I debug through this point and run the code in console of Chrome something like this this.$.stylebackground? = "url(\'../../Media/_0040_macaronicups_fm.jpeg\')" and then check the value of style like this.$.stylebackground? the output is "url(​http://localhost:94/web/a/Media/_0040_macaronicups_fm.jpeg)"

But what i want is like "url(../../Media/_0040_macaronicups_fm.jpeg)"

Any solution can help me a lot. Please tell me if I am going wrong to implement my need.

[Deb]

Any reply/update?

[Jakub Ś]

I will try to have a look at this today or tomorrow.

[Jakub Ś]

I have tried using code like

var editor = CKEDITOR.replace( 'editor1' );			
editor.on('instanceReady', function(ev){
ev.editor.document.getBody().setStyle('background', 'url(../../../../c.jpg)'); 
});

Next I have added style line of code to image onOpen function.

In both cases image was created with relative path. Of course it was removed on mode change as new document gets created then (you would have to use full page mode or other code) but the point is that there was no absolute path.

I have tried that in default editor 3.6.6. and 4.1.1.

@deb either I have missed something (please tell me what it is), there is a problem in your plugin, or you have some custom code that changes code to full URL.

[Deb]

I have created a plugin and here the onOK code

 onOk: function () {
            var mediaUrl = this.getValueOf('info', 'txtUrl');
            var selectedValue = this.getValueOf('info', 'selStyle');
            var useSingle = selectedValue == 'norepeat' ? true : false;
            var element = editor.document.getBody();
            var htmlelement = editor.document.getDocumentElement("html");
            if (element) {
                element.removeAttribute('style');
                htmlelement.removeAttribute('style');
                element.setStyle('background', 'url(' + mediaUrl + ')');
                if (useSingle == true) {
                    element.removeAttribute('style');
                    htmlelement.removeAttribute('style');
                    element.setStyle('background-color', 'transparent');
                    htmlelement.setStyles({
                        'min-height':'100%',
                        'background': 'url("' + mediaUrl + '") no-repeat center center',
                        'background-size': 'cover',
                        '-webkit-background-size': 'cover',
                        '-moz-background-size': 'cover'
                    });
                }
            }

The mediaUrl is nothing but the relative url what i need. The code works fine but just the relative path converted to Absolute one.

Yes, my fullpage mode is true and I am using baseHref also.

please suggest me if i m going wrong.

[Jakub Ś]

You have first written:

to update the style with the relative path what I am adding without the Base Path

so I have assume that you are not using baseHref. I see now that you have decided to admit that you do :)

Yes, my fullpage mode is true and I am using baseHref also.

This is also almost the same issue as #8022. Please try attached template. Property CKEDITOR_BASEPATH sets base HTML tag. Whichever you are using you get the same result and in Webkit and Opera result is as follows:

• Try attached template, just set path to some image existing on your server. In Chrome you will notice that you don't get background but 404 because image with w3c path could not be found.
  
• There is no editor logic just plain HTML page and still browsers add full URL to relative path. This proves that browser is doing this.
• First TC won't work in any browser. Only if you remove base you will be able to see the image. Second TC with iframe will work in IE (just like in editor – relative path is used) but not in FF. I’m not sure why in Firefox on standard full URL is requested but in CKEditor there is relative URL set for body. This might be only visible URL but in reality FF in CKEditor might be using full URL as well.
• The conclusion is that browser adds full URL to relative paths if base is set and what editor receives is post processed data. The only solution here is not using base tag or removing full URL when page is submitted (some server-side filter should be used).