sprklinginfo/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Setup

Download PDFJS prebuilt version from https://mozilla.github.io/pdf.js/getting_started/#download
Unzip the file to 'pdfjs' folder and move it to the BookStack app 'public' folder.  Ensure both 'build' and 'web' folders and its files are there.


Copy and paste the following code to Custom HTML Head Content field on Settings page:
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<style>
  button[data-pdfurl]{
    background-color: lightgrey;
    border: 1px solid #000000;
    border-radius: 5px;
  }
</style>
<script type="text/javascript">
var createButton = function(text,details,id,callback) {
  var btnWrapper = document.createElement('div');
  btnWrapper.id = id;
  btnWrapper.className='mce-widget mce-btn';
  btnWrapper.tabindex=-1;
  btnWrapper.role='button';
  btnWrapper.ariaLabel=details;
  var btn = document.createElement('button');
  btn.id=id+'-button';
  btn.innerText = text;
  btn.role='presentation';
  btn.type='button';
  btn.tabindex='-1';
  btn.style.border = 'solid 1px';
  btn.style.padding = ' 4px 8px';
  btn.style.margin = ' 2px';
  btnWrapper.append(btn);
  btnWrapper.onclick = callback;
  var ar =document.querySelectorAll('.mce-btn.mce-last');
  var lastBtn = ar[ar.length-2];
  lastBtn.parentNode.append(btnWrapper);
};

window.addEventListener('load', function () {

// Insert pdf_viewer button  
var btn = document.querySelectorAll('#mceu_20')[0];

if (btn) {
  createButton('pdf_viewer', 'Insert a PDF', 'mceu_pdf_viewer', function(e) {
        // show dialog
        var editor = tinyMCE.editors[0];
        editor.windowManager.open({
            title: 'Insert PDF',
                body: [
                    {type: 'textbox', name: 'pdfurl', label: 'PDF URL', size: 'large'}
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                   editor.insertContent('<button data-pdfurl="' + e.data.pdfurl + '">Open PDF Viewer</button>');
                }
        });
    });
}

// Callback to open pdf viewer window
function openPDF(e){
  const url = e.target.dataset.pdfurl;
  let pdfViewer = document.createElement('div');
  pdfViewer.className='pdf-viewer';
  pdfViewer.innerHTML = `<iframe title="PDF viwer" src="/pdfjs/web/viewer.html?file=${url}" width="100%" height="500px"></iframe>`;
  Swal.fire({
  title: 'PDF Viewer',
  width: '80%',
  height: '500px',
  html: pdfViewer
})
 
}

const pdfViewers = document.querySelectorAll('button[data-pdfurl]');
for (const viewer of pdfViewers) {
  viewer.addEventListener('click', openPDF);
}

});
</script>

Usage

After the setup, a 'pdf_viewer' button appears in the toolbar of the editor. 


Upload the pdf on the page in order to get the pdf url.
Click 'pdf_viewer' button to paste the url. A 'Open PDF Viewer' button will be inserted in the content area.


when viewing the page, click 'Open PDF Viewer' button will open a popup window to view the pdf file. The viewer has a toolbar for search, download and zoom operations etc. Click 'Ok' button will close the popup window.