Import Word files to BookStack Page #3815

New Issue

OVERLORD · 2026-02-05T07:33:07+03:00

OVERLORD commented

2026-02-05 07:33:07 +03:00

Originally created by @KAE3 on GitHub (May 23, 2023).

Describe the feature you'd like

I have many legacy Word documentation files containing text and images. I want to import these to generate new Pages. Tried copying & pasting from the Word file into new Pages but that is time consuming and error prone. A similar issue was raised in 2021 then closed .

Describe the benefits this would bring to existing BookStack users

Importing Word makes the difference in whether or not BookSmart is the right tool for documentation when historical documentation is in Word. Manual copy & paste of the Word file contents into a Word page is not a practical workaround.

Can the goal of this request already be achieved via other means?

There is a solution here but it would be much more convenient if it was directly built into BookStack.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

Not using yet, just scoping

Additional context

No response

Originally created by @KAE3 on GitHub (May 23, 2023). ### Describe the feature you'd like I have many legacy Word documentation files containing text and images. I want to import these to generate new Pages. Tried copying & pasting from the Word file into new Pages but that is time consuming and error prone. A [similar issue](https://github.com/BookStackApp/BookStack/issues/3064) was raised in 2021 then closed . ### Describe the benefits this would bring to existing BookStack users Importing Word makes the difference in whether or not BookSmart is the right tool for documentation when historical documentation is in Word. Manual copy & paste of the Word file contents into a Word page is not a practical workaround. ### Can the goal of this request already be achieved via other means? There is a solution [here](https://github.com/BookStackApp/api-scripts/tree/main/node-docx-to-page) but it would be much more convenient if it was directly built into BookStack. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundemental request ### How long have you been using BookStack? Not using yet, just scoping ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 07:33:07 +03:00

OVERLORD closed this issue

2026-02-05 07:33:09 +03:00

OVERLORD commented

2026-02-05 07:33:13 +03:00

@ssddanbrown commented on GitHub (May 23, 2023):

Thanks for the request, but from my point of view my feelings remain the same as per #3064 and I haven't really seen any other change in state/circumstance since that issue that would change the position on supporting such a feature.

@ssddanbrown commented on GitHub (May 23, 2023): Thanks for the request, but from my point of view my feelings remain the same as per #3064 and I haven't really seen any other change in state/circumstance since that issue that would change the position on supporting such a feature.

OVERLORD commented

2026-02-05 07:33:17 +03:00

@KAE3 commented on GitHub (May 23, 2023):

I understand, thanks.

@KAE3 commented on GitHub (May 23, 2023): I understand, thanks.

OVERLORD commented

2026-02-05 07:33:20 +03:00

@ssddanbrown commented on GitHub (May 25, 2023):

This issue did get me thinking about a non-official hack solution, based upon my API script you linked.

Here's a version that can be added to the "Custom HTML Head Content" customization setting:

<script src="https://cdn.jsdelivr.net/npm/mammoth@1.5.1/mammoth.browser.min.js" defer></script>
<script type="module">
    function convertAndInsertDocx(editor, file) {
        const reader = new FileReader();
        reader.onload = async function(loadEvent) {
            const arrayBuffer = loadEvent.target.result;
            const {value: html, messages} = await window.mammoth.convertToHtml({arrayBuffer});
            if (messages.length > 0) {
                console.error(messages);
                window.$events.emit('warning', `${messages.length} warnings logged to browser console during conversion`);
            }
            editor.insertContent(html);
        }
        reader.readAsArrayBuffer(file);
    }

    window.addEventListener('editor-tinymce::setup', event => {
        const editor = event.detail.editor;
        editor.on('drop', event => {
            const files = event?.dataTransfer?.files || [];
            for (const file of files) {
                if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && window.mammoth) {
                    convertAndInsertDocx(editor, file);
                }
            }
        });
    });
</script>

Once added, you could then drag and drop a .docx file into the WYSIWYG editor and it's contents will be inserted as HTML. Conversion is very rough, will get a dismissiable editor popup message regarding not supported file type, might break or have problems on future updates. Tested only on Firefox on my dev system/instance.

I'd be interested to know if that kinda works for you. I may add this to our hacks page.

@ssddanbrown commented on GitHub (May 25, 2023): This issue did get me thinking about a non-official hack solution, based upon my API script you linked. Here's a version that can be added to the "Custom HTML Head Content" customization setting: ```html <script src="https://cdn.jsdelivr.net/npm/mammoth@1.5.1/mammoth.browser.min.js" defer></script> <script type="module"> function convertAndInsertDocx(editor, file) { const reader = new FileReader(); reader.onload = async function(loadEvent) { const arrayBuffer = loadEvent.target.result; const {value: html, messages} = await window.mammoth.convertToHtml({arrayBuffer}); if (messages.length > 0) { console.error(messages); window.$events.emit('warning', `${messages.length} warnings logged to browser console during conversion`); } editor.insertContent(html); } reader.readAsArrayBuffer(file); } window.addEventListener('editor-tinymce::setup', event => { const editor = event.detail.editor; editor.on('drop', event => { const files = event?.dataTransfer?.files || []; for (const file of files) { if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && window.mammoth) { convertAndInsertDocx(editor, file); } } }); }); </script> ``` Once added, you could then drag and drop a `.docx` file into the WYSIWYG editor and it's contents will be inserted as HTML. Conversion is very rough, will get a dismissiable editor popup message regarding not supported file type, might break or have problems on future updates. Tested only on Firefox on my dev system/instance. I'd be interested to know if that kinda works for you. I may add this to [our hacks page](https://www.bookstackapp.com/hacks/).

OVERLORD commented

2026-02-05 07:33:22 +03:00

@KAE3 commented on GitHub (May 25, 2023):

Thanks! Hope to try this once I figure it out some basics.

@KAE3 commented on GitHub (May 25, 2023): Thanks! Hope to try this once I figure it out some basics.

OVERLORD commented

2026-02-05 07:33:24 +03:00

@ssddanbrown commented on GitHub (Jun 7, 2023):

I've now added this as a hack here: https://www.bookstackapp.com/hacks/wysiwyg-docx-import/

But since there's no further follow-up, and this is not something I'd look to add to the core project as touched upon above, I'll go ahead and close this off.

@ssddanbrown commented on GitHub (Jun 7, 2023): I've now added this as a hack here: https://www.bookstackapp.com/hacks/wysiwyg-docx-import/ But since there's no further follow-up, and this is not something I'd look to add to the core project as touched upon above, I'll go ahead and close this off.

OVERLORD commented

2026-02-05 07:33:26 +03:00

@samantarya commented on GitHub (Jan 13, 2024):

Hi, thank you very much for this hack. Can I ask how can I apply this hack to a bookstack instance? Also is it possible to apply it to the demo instance?

@samantarya commented on GitHub (Jan 13, 2024): Hi, thank you very much for this hack. Can I ask how can I apply this hack to a bookstack instance? Also is it possible to apply it to the demo instance?

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#3815