Loading...
 
Skip to main content

History: ViewerJS

Source of version: 13 (current)

Copy to clipboard
            ^ 
As of ((Tiki19)), ViewerJS,  which includes ((WebODF)), will no longer be supported because no significant work has been done since 2015
* https://github.com/kogmbh/ViewerJS/commits/master

For PDF viewing, we will start using code directly from [https://github.com/mozilla/pdf.js|Mozilla's PDF.js], and installable via ((Packages)).

For ODF viewing, we will start using code directly from the [https://asset-packagist.org/package/detail?fullname=bower-asset/wodo.texteditor|Wodo text editor] (WebODF), and installable via ((Packages)).
^ 

! ViewerJS
As of ((Tiki15|Tiki 15.0)) (also backported to ((Tiki14|14.2)) and ((Tiki12|12.5)) ) support has been added for [http://viewerjs.org|ViewerJS].

ViewerJS can already natively show both PDF files and many types of Office files stored in OpenDocument Format, the open standard for office documents. ODF is available by default in almost any modern office applications such as Microsoft Office, LibreOffice, Apache OpenOffice and Calligra Suite. Because it is built on modern web technologies, ViewerJS understands embedded fonts, so your documents look pretty everywhere.

!! Install
Assuming:

* Site address is -+http://tiki15.docker+-
* Document root path is -+/var/www/html+-
* Database name is tiki15
* For this example we will use [PluginMediaPlayer].


!!! Getting and unpacking viewerjs
1. Get viewerjs
{CODE(colors="shell",wrap=0,ln=1)}
curl -o /tmp/viewejs.zip \
    https://viewerjs.org/releases/ViewerJS-latest.zip
{CODE}

2. Unzip content on Tiki installation
{CODE(colors="shell",wrap=0,ln=1)}
unzip /tmp/viewejs.zip \
    -d /var/www/html/files
{CODE}

3. Fix folder name
{CODE(colors="shell",wrap=0,ln=1)}
mv /var/www/html/files/viewerjs-0.5.8 \
    /var/www/html/files/viewerjs
{CODE}

4. Remove uneeded zip file
{CODE(colors="shell",wrap=0,ln=1)}
rm /tmp/viewejs.zip
{CODE}


!!! Setting up Tiki
Remembering, for this example we will use [PluginMediaPlayer].

!!!! Activate ViewerJS
{TABS(name="user_tabset_01" tabs="Using admin panel|Using command line")}
1. Go to "File Galleries" admin page (http://tiki15.docker/__tiki-admin.php?page=fgal__)
2. Click on "Enhancements" Tab
3. On "Access" section check the option "Use Viewer JS"
4. Click on "Apply" button
/////
1. Load credentials
{CODE(colors="shell",wrap=0,ln=1)}
eval $(sed -n '/^\$/s/^\$//p' /var/www/html/db/local.php)
{CODE}

2. Setup new preferences
{CODE(colors="shell",wrap=0,ln=1)}
mysql -u$user_tiki -p$pass_tiki -h$host_tiki $dbs_tiki << EOF
INSERT INTO tiki_preferences VALUES
    ('fgal_viewerjs_feature', 'y')
    ON DUPLICATE KEY UPDATE value='y';
INSERT INTO tiki_preferences VALUES
    ('fgal_viewerjs_uri', 'files/viewerjs/ViewerJS/index.html')
    ON DUPLICATE KEY UPDATE value='files/viewerjs/ViewerJS/index.html';
EOF
{CODE}
{TABS}

!!!! Adjust Editor toolbar
1. Go to toolbar edit page (http://tiki15.docker/__tiki-admin_toolbars.php__)
2. On section "Plugin Tools" locate and drag "mediaplayer" to section "Row 1"
3. Click on "Save" button


!! Usage
You can use ViewerJS through the File Gallery, or through ((PluginMediaplayer)) or through ((PluginIframe)), but remembering, for this example we will use [PluginMediaPlayer].

1. Go to File Galleries upload page (http://tiki15.docker/__tiki-upload_file.php__)
2. Select any PDF you want
3. Click on "Upload" button
4. Write down the file ID (Let's suppose ID is 1)
5. Edit any page you want (eg.: http://tiki15.docker/tiki-editpage.php?page=HomePage)
6. On editor toolbar, click on button with "Play" icon
7. On "URL" field, type "tiki-download_file.php?fileId=__1__", where 1 is the file ID
8. On "File type" field, type "PDF"
9. Click on "Insert" button
10. After popup closes, click on "Save" button

You should see the PDF inside your page.


!! Related
Related:
* ((PDF))
* ((File Gallery))
* ((PluginMediaPlayer))
* ((PluginIframe))

{include page="PDF related pages"}