Page 1 of 1
CKEditor Image Browse - Relative Paths for image address
Posted: 01 Nov 2016, 19:24
by 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:
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
CKEditor Image Browse - Relative Paths for image address
Posted: 02 Nov 2016, 18:05
by Admin
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:
- 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/';
CKEditor Image Browse - Relative Paths for image address
Posted: 02 Nov 2016, 19:59
by justanumber
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.
CKEditor Image Browse - Relative Paths for image address
Posted: 08 Nov 2016, 09:11
by Admin
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();
CKEditor Image Browse - Relative Paths for image address
Posted: 24 Jan 2017, 00:01
by justanumber
Sorry for late reply, totally missed your reply.
Thank you, this works great!
