PDF Viewer in Site #2914

New Issue

OVERLORD · 2026-02-05T05:42:55+03:00

OVERLORD commented

2026-02-05 05:42:55 +03:00

Originally created by @reddexx on GitHub (Jul 20, 2022).

Describe the feature you'd like

Hi Dan, would it be possible to include a function that allows you to insert a PDF viewer from an attached PDFs into the page via button?

The html code would be theoretical

<object data="{URL}/{AttachmentFileCount}?open=true&embedded=true" type="application/pdf" width="700" height="527">

Describe the benefits this would bring to existing BookStack users

Live PDF Preview

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

Yes over HTML Tag

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?

1 to 5 years

Additional context

No response

Originally created by @reddexx on GitHub (Jul 20, 2022). ### Describe the feature you'd like Hi Dan, would it be possible to include a function that allows you to insert a PDF viewer from an attached PDFs into the page via button? The html code would be theoretical `<object data="{URL}/{AttachmentFileCount}?open=true&embedded=true" type="application/pdf" width="700" height="527">` ### Describe the benefits this would bring to existing BookStack users Live PDF Preview ### Can the goal of this request already be achieved via other means? Yes over HTML Tag ![2022-07-20 16_00_14-LDAP over SSL Zertifik _ Bookstack](https://user-images.githubusercontent.com/6242840/180001953-534dde0e-d79a-4edf-8dc2-306ca2be3c6d.png) ### 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? 1 to 5 years ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 05:42:55 +03:00

OVERLORD closed this issue

2026-02-05 05:43:08 +03:00

OVERLORD commented

2026-02-05 05:43:13 +03:00

@ssddanbrown commented on GitHub (Jul 20, 2022):

Thanks for the request @reddexx but I'm going to close it off as I feel the fundemental request is already covered by #1270 and potentially #705.

For now, to save manual insert, Below is an example "Custom HTML Head" script which would add a page icon after the editor link toolbar icon, for inserting a PDF. You may want to add accompanying styles and/or tweak the <object data line to your requirement.

<script>

  // Use BookStack editor event to add custom "Insert PDF" button into main toolbar
  window.addEventListener('editor-tinymce::pre-init', event => {
      const mceConfig = event.detail.config;
      mceConfig.toolbar = mceConfig.toolbar.replace('link', 'link insertpdf')
  });

  // Use BookStack editor event to define the custom "Insert PDF" button.
  window.addEventListener('editor-tinymce::setup', event => {
    const editor = event.detail.editor;

    // Add PDF insert button
    editor.ui.registry.addButton('insertpdf', {
      tooltip: 'Insert PDF',
      icon: 'document-properties',
      onAction() {
        editor.windowManager.open({
          title: 'Insert PDF',
          body: {
            type: 'panel',
            items: [
              {type: 'textarea', name: 'pdfurl', label: 'PDF URL'}
            ]
          },
          onSubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent('<object data="' + e.getData().pdfurl + '"></object>');
            e.close();
          },
          buttons: [
            {
              type: 'submit',
              text: 'Insert PDF'
            }
          ]
        });
      }
    });

  });

</script>

Note, the above content is not an official nor supported part of BookStack, and may break upon future updates.

@ssddanbrown commented on GitHub (Jul 20, 2022): Thanks for the request @reddexx but I'm going to close it off as I feel the fundemental request is already covered by #1270 and potentially #705. For now, to save manual insert, Below is an example "Custom HTML Head" script which would add a page icon after the editor link toolbar icon, for inserting a PDF. You may want to add accompanying styles and/or tweak the `<object data` line to your requirement. ```html <script> // Use BookStack editor event to add custom "Insert PDF" button into main toolbar window.addEventListener('editor-tinymce::pre-init', event => { const mceConfig = event.detail.config; mceConfig.toolbar = mceConfig.toolbar.replace('link', 'link insertpdf') }); // Use BookStack editor event to define the custom "Insert PDF" button. window.addEventListener('editor-tinymce::setup', event => { const editor = event.detail.editor; // Add PDF insert button editor.ui.registry.addButton('insertpdf', { tooltip: 'Insert PDF', icon: 'document-properties', onAction() { editor.windowManager.open({ title: 'Insert PDF', body: { type: 'panel', items: [ {type: 'textarea', name: 'pdfurl', label: 'PDF URL'} ] }, onSubmit: function(e) { // Insert content when the window form is submitted editor.insertContent('<object data="' + e.getData().pdfurl + '"></object>'); e.close(); }, buttons: [ { type: 'submit', text: 'Insert PDF' } ] }); } }); }); </script> ``` Note, the above content is not an official nor supported part of BookStack, and may break upon future updates.

OVERLORD commented

2026-02-05 05:43:19 +03:00

@reddexx commented on GitHub (Jul 22, 2022):

it´s Working, thanks

@reddexx commented on GitHub (Jul 22, 2022): it´s Working, thanks

OVERLORD commented

2026-02-05 05:43:21 +03:00

@mhasgari commented on GitHub (Aug 20, 2022):

I've added the code, now the button exists and it seems fine, but when I attach a PDF, put its link inside the related form, save and try to view the newly created page, there is no PDF preview and just a download pops up and starts downloading the PDF file...
What should I do? Does it mean a package should be installed on the server or so?

@mhasgari commented on GitHub (Aug 20, 2022): I've added the code, now the button exists and it seems fine, but when I attach a PDF, put its link inside the related form, save and try to view the newly created page, there is no PDF preview and just a download pops up and starts downloading the PDF file... What should I do? Does it mean a package should be installed on the server or so?

OVERLORD commented

2026-02-05 05:43:27 +03:00

@dan-r95 commented on GitHub (Apr 27, 2023):

Only think I would change in the snippet above is to add the custom query parameters in function onSubmit to embed the pdf properly, like so.

editor.insertContent('<object data="' + e.getData().pdfurl + '?open=true&amp;embedded=true" type="application/pdf" width="700" height="527"></object>');

@dan-r95 commented on GitHub (Apr 27, 2023): Only think I would change in the snippet above is to add the custom query parameters in `function onSubmit` to embed the pdf properly, like so. ``` editor.insertContent('<object data="' + e.getData().pdfurl + '?open=true&embedded=true" type="application/pdf" width="700" height="527"></object>'); ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2914