image URL address

[daybat]

hello.
The image URL adds the website address.
for example, I add only the absolute path like this: /upload/img1.jpg
But the editor adds the website address and now the path is like this: http://website.com/upload/img1.jpg
How to avid adding the website address?

[JiHong88]

Hi, @daybat
Do you want to specify the default website url?
Like this:
"http://website.com/" + "/upload/img1.jpg"

[daybat]

no. I don't want the website hostname to be added to ImageURL.
I want only "/upload/img1.jpg"
Please check it: add some image URL like this "/upload/img1.jpg" and then open the image modal window to edit the image properties. Now the imageURL contains the website hostname

[JiHong88]

You cannot specify absolute paths on the web.
Formats like "/ upload/img1.jpg" are relative paths.
url is the actual path of the current image.

[daybat]

yes. right. I'm sorry. I mean relative path. I don't want my images to be connected with my development host address. So I don't want the website name be in the path to the image. Only /upload/img1.jpg but not http://website.com/upload/img1.jpg

Is it possible to remove the hostname from the image path ?

[JiHong88]

"/upload/img1.jpg" is mean "http://website.com/upload/img1.jpg" in the web browser.
Even if you forcibly remove the hostname, the path will still be the same.
And I think that showing the image src different from the actual value is not user friendly.

[daybat]

for example there are2 websites: one is for editing the texts and the other is working web site. They both have common folder /upload After editing the text with images the path of images contains the hostname of the editing site. And on the working web site the images can not be shown because the access to editing site is restricted. Hope I could clear describe my problem

[JiHong88]

Hmm..
server1: image uploaded server
"website1" and "website2" is upload image to "server1"
right this?

[daybat]

server1: upload image to server1/upload/
website1(2, 3, 4, 5 ... ): takes the image from website1 (2, 3, 4, 5 ...)/upload/ and shows it to visitors
Folder /upload/ is common folder for both :server1 & website 1

Apache server config server1:
Alias /upload/ /some-path/upload/

Apache server config website1:
Alias /upload/ /some-path/upload/

Just add please in the Suneditor configuration a key to remove the hostname from the image URL or not

[JiHong88]

There is no relative path on the web browser.
"/upload/img.jpg" path is mean "website1.com/upload.img.jpg" in the web browser.
The "website1.com" path is the value that the web automatically puts when it is a relative path.

The Apache server configuration is independent of the web browser.
What is the absolute path of the image?
Am I misunderstanding?

[daybat]

I open the SunEditor to edit the text on the website1 through server1 (server1 is for editing information on website1(2,3,4...). I need to attach some images I have in the folder /upload/ on my server1 (folder /upload/ is shared both among server1 & website1). I know the path to image1.jpg: /upload/1/image1.jpg. I don't need to upload image to server because the image is already in the folder on the server. So I click on 'image' button on the SunEditor menu to open the modal window to attach the image. In the "Image URL" input field I type "/upload/1/image1.jpg", then "Submit" and I have the image in text editor. Everything is OK. I open the "Code View" mode and see <img src="/upload/1/image1.jpg"> Perfect! But I forget to add the "Alternative text". I open the form for editing my Image image1.jpg to add the "Alternative text" (the icon with gears). But now the "Image URL" input field contains "http://server1/upload/1/image1.jpg". I add the "Alternative text" save the changes and save the whole document.
Now I open the website1 to see the changes - there is no image, broken icon. The image path now is http://server1/upload/1/image1.jpg, but access to http://server1/ is restricted, only editors have access to server1.
If the image path did not had the hostname (http://server1) in the path of the image - everything would be fine. The path /upload/ is common to both server1 & website1(2,3,...)

[JiHong88]

Thanks for the details.
I almost understand, but there is one thing to check.
Can you show me the real image path?
Like this:

img src path and image's real path.

[JiHong88]

If you don't have access, then can't you give the "access-control-allow-origin" header?
The method of simply removing the web path from the "src" attribute of the image has the following problem.
I can't judge if the web path should be removed or not.

[daybat]

add image:


After editing of the image:

[daybat]

now I solve the image path problem with the help of the following code:
const ImageModal = document.querySelector('div.form-group.txt form.editor_image').parentNode; const observer_ImageModal = new MutationObserver(function(mutations) { mutations.forEach(function(mutationRecord) { if ( window.getComputedStyle(ImageModal, null)['display'] !== 'none' ){ const imageURL = document.querySelector('div.form-group.txt form.editor_image input.se-input-form.se-input-url'); imageURL.value = imageURL.value.replace( new RegExp(self.hostname), ''); document.querySelector('div.form-group.txt form.editor_image input.imageID').value = ""; document.querySelector('div.form-group.txt form.editor_image input.imageID').dispatchEvent( valChanged ); } }); });

[daybat]

If you don't have access, then can't you give the "access-control-allow-origin" header?

Don't like this due to security reason

[JiHong88]

This issue cannot be reflected in common options.
Currently, the value of the image's src attribute is not modified, is put in the input tag.
I can't judge if the image's src attribute should be replaced with a relative path.

This code sets the src of the image in the url input tag. image.js#L745
You can redefine this method.

import plugins from 'suneditor/src/plugins'
plugins.image.openModify = function (notOpen) {
        const contextImage = this.context.image;
        /*** Set the image(contextImage._element) src ***/
        if (contextImage.imgUrlFile) contextImage.imgUrlFile.value = contextImage._element.src;
        /*** ↑↑↑↑↑↑ Change this code. ↑↑↑↑↑↑ ***/
        contextImage._altText = contextImage.altText.value = contextImage._element.alt;
        contextImage._linkValue = contextImage.imgLink.value = contextImage._linkElement === null ? '' : contextImage._linkElement.href;
        contextImage.imgLinkNewWindowCheck.checked = contextImage._linkElement && contextImage._linkElement.target === '_blank';
        contextImage.modal.querySelector('input[name="suneditor_image_radio"][value="' + contextImage._align + '"]').checked = true;
        contextImage._align = contextImage.modal.querySelector('input[name="suneditor_image_radio"]:checked').value;
        contextImage._captionChecked = contextImage.captionCheckEl.checked = !!contextImage._caption;
        
        if (contextImage._resizing) {
            this.plugins.resizing._module_setModifyInputSize.call(this, contextImage, this.plugins.image);
        }

        if (!notOpen) this.plugins.dialog.open.call(this, 'image', true);
    }

Can your problem be solved?

[daybat]

thank you for help. I have redefined the openModify function of the image plugin and now it works as I need.