CKEditor Image Browse - Relative Paths for image address

[justanumber]

Hi, great plugin and very simple to setup + use.

Current setup the absolute path is used, like:

Code: Select all

http://example.com/kidsblogs/images/userimg.png

Like to have this:

Code: Select all

images/userimg.png

Understand that may have to use the base href tag to make this work, or seems logical.

We use a windows software (created in-house) that kids use to create blogs which run on school local area network. The absolute path works great when they build / update site, but when published the images are broken.
Any ideas how we may solve issue with mod so relative paths are used?

We are on a local area network and URL's end up something like:

Code: Select all

http://192.168.26.01/schoolname/teacherclassroom/kidsblogs/kidsname/images/imgname.jpg

Due to firewall restrictions the images are broken and need to relative URL like images/imgname.jpg
The people at CKEditor says only to solve is modifying the image browser plugin.

Maybe this will just not work but be wonderful if could figure it out:)

Thanks again for your time.

Woody

To use relative path in the "src" address of the images, try make this modification in the "imgbrowse.php" file (in the /ckeditor/plugins/imgbrowse/ folder).
Replace this line of code (line 28, in getMenuImgs() function):

Code: Select all

$site = $protocol. $_SERVER['SERVER_NAME'] .'/';

With this:

Code: Select all

$site ='/';

- The path will be ralative to site root (/schoolname/teacherclassroom/kidsblogs/kidsname/images/imgname.jpg).

If you want to use absolute path, with server ip in address, replace that line of code with this:

Code: Select all

$site = $protocol. $_SERVER['REMOTE_ADDR'] .'/';

- The "src" address will be something like this: "http://127.0.0.1/schoolname/teacherclas ... mgname.jpg".

Or, if it is a fixed ip, add it directly:

Code: Select all

$site = $protocol .'192.168.26.01/';

We tried that and still had absolute URL for images. Going to start with fresh install and make your suggested changes. Since so many mods were made trying to make work, starting fresh will solve the problem.

Appreciate your assistance much.

When the user clicks on an image to add it in ckeditor content, the image address is sent to ckeditor function to add it in content. With this code, in the "imgbrowse.html" file (line 192):

Code: Select all

if(CKEditorFuncNum !== null) window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, e.target.src);

So, in this case, the absolute path is not added by the imgbrowse plugin, but is automatically set and added by the CKEditorFuncNum() function in the URL input field with Image properties.

- To can use Relative Path for the selected image in the imgbrowse window, try this modification.
Add these lines of code in the "imgbrowse.html" file, directly after the line 192:

Code: Select all

var inp_src = window.opener.document.querySelector('.cke_dialog_ui_input_text input.cke_dialog_ui_input_text');
if(inp_src) inp_src.value = e.target.src.replace(/(http\:\/\/|https\:\/\/)[^\/]+/i, '');

This code deletes the "http://..." from the value added in that URL input field.

- So, the code in that area in the "imgbrowse.html" file to be:

Code: Select all

if(CKEditorFuncNum !== null) window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, e.target.src);
var inp_src = window.opener.document.querySelector('.cke_dialog_ui_input_text input.cke_dialog_ui_input_text');
if(inp_src) inp_src.value = e.target.src.replace(/(http\:\/\/|https\:\/\/)[^\/]+/i, '');
window.close();

Sorry for late reply, totally missed your reply.

Thank you, this works great!