Inserting/Pasting image into markdown/WYSIWYG editor displays wrong URL

[niklasmh]

Describe the bug

I really, really like the insert/paste image function in the markdown/WYSIWYG editor, but as I am serving the website using your docker image strapi/strapi I get URLs like: http://localhost:1337/uploads/bca173c38e484f678322c0207aef56e0.png, even though it is hosted at https://wheremystrapiishosted.com.

Steps to reproduce the behavior

1. Copy any image on you computer (ctrl + c).
2. Go to a markdown editor.
3. Paste the image (ctrl + v).

Expected behavior

I would like that the URL points to the current domain: https://wheremystrapiishosted.com/uploads/.... (aka not http://localhost:1337/uploads/...)

Screenshots

The image also jumps to the end of the file, but that is another issue: #978.

System

• Docker image: strapi/strapi:44112fe (which basically sums up the versions below)
• Node.js version: v11.1
• NPM version: 6.4.1
• Strapi version: 3.0.0-alpha.26.2
• Database: mongo
• Operating system: ubuntu / your docker image

Additional context

... and ideas that may solve the problem

I am guessing this url (localhost:1337 in the image above) is set using the host and port from ./config/environments/development/server.json. But changing this is not an option as this is the path through the docker container to the host machine.

1. One idea is to somewhere be able to configure a "public url" and use this instead if set.
2. A second idea is to just use the url you are currently on. There may be use cases I am not aware of, but in the front-end you know all about the location (window.location.origin) so this should be quite easy.

It may be that the first idea is already possible, thus if it is, I would like to know.

[derrickmehaffy]

@niklasmh please adjust your issue to follow the bug report template and not a feature request.

This is a templated message

Hello, please follow the issue template.

A proper issue submission let's us better understand the origin of your bug and therefore help you.

I will reopen your issue when we receive the issue following the template guidelines and properly fill out the template.

Please update the issue.

Thank you.

A copy of the bug report template can be found below:

<!--
Hello 👋 Thank you for submitting an issue.

Before you start, please make sure your issue is understandable and reproducible.
To make your issue readable make sure you use valid Markdown syntax.

https://guides.github.com/features/mastering-markdown/
-->

**Describe the bug**
A clear and concise description of what the bug is.

**Steps to reproduce the behavior**
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Code snippets**
If applicable, add code samples to help explain your problem.

**System**
- Node.js version: <!-- Please ensure you are using the Node LTS version (v10) -->
- NPM version:
- Strapi version: <!-- Please make sure you are on the latest version -->
- Database:
- Operating system:

**Additional context**
Add any other context about the problem here.

[lauriejim]

Hello @niklasmh !
Here is a really similar issue there #978

[niklasmh]

I have actually referenced the same issue in the description:

The image also jumps to the end of the file, but that is another issue: #978.

This issue is different in that it focuses on the URL and not the position. I may could have been clearer on this. I see the similarities with the issue. It is on the same copy/paste functionality.

[niklasmh]

I found the solution. For future references: I had missed the part of the docs telling about the use of proxies: https://strapi.io/documentation/3.0.0-alpha.x/configurations/configurations.html#server.

// ./config/environments/**/server.json
{
  ...
  "proxy": {
    "enabled": true,
    "ssl": true,
    "host": "customurl.com",
    "port": 443
  },
  ...
}

The config above gave this result when pasting an image into the editor:

I am still wondering why window.location.origin (from the frontend) is not used as it would fix most cases like this. Now you cannot have multiple URLs (or switch the URL without editing the config) as it is stuck in the backend.

Anyway, great work with the editor!

[royketelaar]

Hello.

Is there a way to fix this in the latest version of Strapi? I applied the same solution as @niklasmh except I used the new js syntax instead of json. But the urls in the markdown text still point to the url urlwheresiteishosted.com instead of customstrapicms.com where the site is hosted instead of

My server.js file:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'https://customstrapicms.com',
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET'),
    },
  },
  proxy: {
    enabled: true,
    ssl: true,
    host: "https://customstrapicms.com",
    port: 443
  },
});

For now I used a front-end solution by using replaceAll() function and then replacing '/uploads' with 'https://customstrapicms.com/uploads'

[lauriejim]

Hello!

Can you please create a new GitHub issue by using the GitHub issue template, providing all required information.

Your issue looks related to that topic but it's an old one. Using another thread (GitHub issue) will be able to manage your case.

Thank you and have a good day.

[derrickmehaffy]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/how-to-make-a-blog-with-images-between-the-text/222/3