djangoreactjsdjango-modelsdjango-packages

Adding full path to django MarkdownX images?


I have added a MarkdownxField to my django model, and it works well. I can edit it witha proper preview from the admin panel.

However, when I added images to the markdown there's a problem. My app is built in React and is served from a different port on the domain. When MarkdownX adds the image to the markdown file it does so with a relative path, so the call goes to the client port instead of the server port where it automatically saves the image.

I've looked through the settings options for MarkdownX but couldn't find something that would help out. The image is uploaded an saved well. But the client side can't get to it.


Solution

  • So this isn't exactly what I was going for in the question, but I solved it in the Client side in this by injecting the full path when parsing the markdownx content.

    Just in case anyone gets stuck on it here's what i did:

    // This util function acts as a middleware when i collect the data.
    import { serverPath } from "../serverPaths";
    
    const markdownImageInjector = (data: string): string => {
      let injected = data.replace(
        /!\[\]\(\/media\/markdownx\//g,
        `![](${serverPath}media/markdownx/`
      );
      return injected;
    };
    
    export default markdownImageInjector;
    

    and here is the action:

    const getArticle = (id: string) =>
      axios
        .get(`${apiPath}/articles/${id}`)
        .then(res => {
          let data = res.data;
          data.content = markdownImageInjector(data.content);
          return data;
        })