Importing DOCX and OneNote Pages with Pictures as Assets

[P4mes4n]

The past few weeks I was looking on how to import existing documentation in our Wiki. This includes a lot of documentation as either docx or in OneNote files, that can have A LOT of pictures. I am talking 150+ pictures in a single documentation about how a certain system has been installed.

The problem is Wiki.js currently doesn't support copy/pasting images (well you can sometimes have luck and have it working in the visual editor with the pictures being inserted as Base64, but I still haven't figured out when it works and when it doesn't). Having to manually redo this with uploading all the pictures and inserting them into the text really isn't something I was looking forward to.

There are 2 possible ways to achieve this (Convert OneNote to docx first using file->export).
Note that both of these aren't perfect and some formatting may be lost!

Using the amazing pandoc converter

Using this command will extract all images from the docx in a separate folder and convert the docx to Markdown:
pandoc --extract-media ./myMediaFolder input.docx -o output.md
This will also place MD links in the converted dokcument. For these to work in the Wiki you have to fix them sligthly, as they will look something like this [Alternate Text](./myMediaFolder/media/image.png).
Notice the extra media Folder as well as the general path you probably don't want like this in your wiki. This is because pictures inside a docx file are actually in a folder called media.

If you plan on doing this on a lot of files, its best to prepare a short script (ChatGPT can do this stuff pretty good).
For only a few, simply open the file in a text editor of your choice (eg. Notepad++), hit ctrl+h (find and replace) and enter the following:
find:](./myMediaFolder/media/
replace with:](/path/to/my/page/
Now the links will work inside your wiki as well.

You can now either copy and paste the Markdown and upload the pictures manually or you can use a local storage target to import all at once (works great!).

Using Word integrated features

If you can't or don't want to use pandoc, you can achieve something similar using just word.
Simply export your docx file as a website (*.htm; *.html). When exporting remove spaces and capital letters in the filename.
Exporting the file as a website extracts all the pictures as well in a folder alongside it. It places html links inside the file that point to your pictures as well. Note that sometimes it extracts the pictures in png and jpg but only points to one of these types in the html. Make sure to check which ones you actually need.

Now simply do a correction of the links the same way as we did above. Open in an editor of your choice (eg. Notepad++) and do a find an replace (ctrl+h). This time due to html it looks a bit different (make sure to replace filename with your actual filename!):
find:src="filename-Files/image
replace:src="/path/to/my/page/image

Now go to your wiki, create the new page at the path choosing the Code (Raw HTML)-Editor.
Copy and Paste your html into the editor, upload your images to the corresponding folder (just upload, no inserting needed!) and save the page.
It should look okay, but something probably looks a bit off. Just convert the page to either markdown or visual editor (both works just fine!) Now remove the additional html at the top of the page (if there is any) and save.
Done!

This information may seem obvious to some, but I didn't find any guide that explains this really, so I thought I write a short one, and if it just helps one person it was already worth it.
If you know any other, less complicated way for the average User, I am all ears.

[e4rthdog]

Thanks for the guide. I will go down this road but i will choose not to have the pics in Assets. I think that i will use git storage and convert my existing doc with pandoc having the pics within the article. This will give me the liberty to have the articles autonomous. In any case the article images will rarely be used in another article.