Configure your WYSIWYG editor in Drupal to keep links and references to images across different servers

Drupal is really great as keeping references to media files when they are specified as fields in a content type, but not so great when those images are added to the content of a page by using a WYSIWYG editor, like CKEditor.

In this article, I will explain how to configure Drupal to embed Media files in the content of your pages and avoid having broken links when you migrate your site to a different location, specially when you move your site to a different sub-folder, i.e. from to


  • WYSYWYG module enabled, with the CKEditor library installed. IMPORTANT: Check what CKEditor libraries are compatible with the version of the WYSIWYG module you are installing.
  • Pathologic module enabled.
  • CKEditor link module enabled.

Step 1 – Enable CKEditor in WYSIWYG profiles

Enable WYSYWYG on the desired WYSIWYG profiles (admin/config/content/wysiwyg).

Step 2 – Configure Text Formats

Configure each of the text formats enabled in Drupal (admin/config/content/formats/) and follow these steps:

  1. Enable these filters:
    1. Convert line breaks into HTML (i.e. <br> and <p>)
    2. Convert URLs into links
    3. Convert Media tags to markup
    4. Correct faulty and chopped off HTML
    5. Correct URLs with Pathologic
  2. Under “Filter processing order”, sort the filters in the following order:
    1. Convert Media tags to markup
    2. Convert URLs into links
    3. Convert line breaks into HTML (i.e. <br> and <p>)
    4. Correct faulty and chopped off HTML
    5. Correct URLs with Pathologic
  3. Under “Filter settings” ensure that this option is selected “Use global Pathologic settings”
  4. Save configuration.

Step 3 – Configure Pathologic

  1. Configure Pathologic to “Path relative to server root (/foo/bar)”.
  2. Add all the base paths of the different servers that will host this project.
  3. Save configuration


Step 4 – Configure WYSIWYG profiles

For each of the WYSIWYG profiles using CKEditor (admin/config/content/wysiwyg), follow the next steps.

  1. Edit the profile
  2. Select the buttons you want to enable in the editor, but ensure that you enable “Media Browser” and keep “Image” and  “Enhanced Image” disabled. This will allow you to add images using the Media entity instead of the regular features that CKEditor uses to add images. I recommend this configuration:
    1. Bold
    2. Italic
    3. Align left
    4. Align center
    5. Bullet list
    6. Numbered list
    7. Outdent
    8. Indent
    9. Link
    10. Unlink
    11. Superscript
    12. Subscript
    13. Blockquote
    14. Source code
    15. Paste text
    16. Paste from Word
    17. Remove format
    18. HTML block format
    19. Media browser
  3. Leave other settings as default and press “save”.

Once you do this, you will notice that the editor will have only one button to add images:

That button will trigger the Medial library and embed those files in your content, preserving the links when you migrate your site to a different folder or location.

Do you need some help?

Let's get started. Tell us a little about yourself and your organization
and we can start a conversation about your needs and our capabilities.

Related Posts