Stand-alone mode

[JoeT]

I am planning to use WonderCMS as part of a project to provide information to evacuees in an evacuation shelter after a natural disaster, so we obviously cannot count on having internet access. This system is being imagined and deigned for no internet access at all, in a stand-alone mode.

However, despite my pouring over the code, downloading the remote resources and adjusting the code to point internally to the CSS and JS resources, I seem to be missing the text/font icons in Summernote, making the goal of WYSIWYG editing a bit harder for the end users.

If someone can at least point me towards the proper resources to download and what code I might have missed that is calling them, I would appreciate it.

[nox]

Hey JoeT, I really like your idea using WonderCMS in offline mode, so I tried to do the same but using XAMPP without Internet connection. It was a lot of leg work looking for js and css files but somehow it did work. Here is the whole process if anyone wants to give it a try and how to fix Glyphicons and Summernote font at the end.

Offline Wonder CMS
=================

Step 1
Download Wonder CMS:
https://www.wondercms.com/download


Step 2
Create new folder where index.php is, I called mine "admin". This is where all js and css for admin will go.
Open index.php and search for external sources (css and js).
Included links for Wonder CMS 343, but they might change in the future:

- wcms-admin.min.css
https://cdn.jsdelivr.net/gh/WonderCMS/w ... in.min.css

- autosize.min.js
https://cdn.jsdelivr.net/npm/autosize@4 ... ize.min.js

- taboverride.min.js
https://cdn.jsdelivr.net/npm/taboverrid ... ide.min.js

- wcms-admin.min.js
https://cdn.jsdelivr.net/gh/WonderCMS/w ... min.min.js

Download all sources and move into "admin" folder.
Inside index.php replace url to admin/filename.ext (admin/wcms-admin.min.css, admin/autosize.min.js...) for all sources.

Wonder CMS will work offline with this setup.
Create a backup, because if the device is connected to the network it might look for an update.


Summernote Editor
================

Step 1
https://github.com/robiso/summernote-editor/tree/master

Download Summernote Editor, unpack and remove "-master" so it is "summenote-editor" then move into plugins folder.

Here are Summernote files:

- jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/ ... ery.min.js

- bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/ ... rap.min.js

- summernote.min.js
https://cdn.jsdelivr.net/npm/summernote ... ote.min.js

- browser-image-compression.js
https://cdn.jsdelivr.net/npm/browser-im ... ression.js

- bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/ ... ap.min.css

- summernote.min.css
https://cdn.jsdelivr.net/npm/summernote ... te.min.css

Download all and move into plugins/summernote-editor/ "js" folder for JS and "css" folder for CSS.

Inside summernote-editor.php:

[Updated]
For JS look for

Code: Select all

function loadSummerNoteJS($args) {

with 6 script sources. Replace with:

Code: Select all

<script src="{$Wcms->url('plugins/summernote-editor/js/jquery.min.js')}" type="text/javascript"></script>
<script src="{$Wcms->url('plugins/summernote-editor/js/bootstrap.min.js')}" type="text/javascript"></script>
<script src="{$Wcms->url('plugins/summernote-editor/js/summernote.min.js')}" type="text/javascript"></script>
<script src="{$Wcms->url('plugins/summernote-editor/js/browser-image-compression.js')}" type="text/javascript"></script>
<script src="{$Wcms->url('plugins/summernote-editor/js/admin.js')}" type="text/javascript"></script>
<script src="{$Wcms->url('plugins/summernote-editor/js/files.js')}" type="text/javascript"></script>

For CSS look for

Code: Select all

function loadSummerNoteCSS($args) {

with 3 link sources. Replace with:

Code: Select all

<link rel="stylesheet" href="{$Wcms->url('plugins/summernote-editor/css/bootstrap.min.css')}" type="text/css" media="screen">
<link rel="stylesheet" href="{$Wcms->url('plugins/summernote-editor/css/summernote.min.css')}" type="text/css" media="screen">
<link rel="stylesheet" href="{$Wcms->url('plugins/summernote-editor/css/admin.css')}" type="text/css" media="screen">

Step 2

Fix glyphicons and summernote font issue:

- Glyphicons
https://cdnjs.cloudflare.com/ajax/libs/ ... ular.woff2

Path: plugins/summernote-editor/fonts

- Summernote font
https://cdn.jsdelivr.net/npm/summernote ... note.woff2
https://cdn.jsdelivr.net/npm/summernote ... rnote.woff
https://cdn.jsdelivr.net/npm/summernote ... ernote.ttf

Path: plugins/summernote-editor/css/font (keep in mind it is font without s and goes into css folder)

Summernote Editor should work in offline mode.

[nox]

There is a Summernote Editor Lite plugin without Bootstrap made by c0mp0ser:
viewtopic.php?p=6628#p6628

[JoeT]

First, thanks for taking the time to dig into this.

I made the modifications as you suggested, but there is no change.

root@shelterinfo:/var/www/html# ls assets/
autosize.min.js bootstrap.min.css bootstrap.min.js browser-image-compression.js jquery-1.12.4.min.js jquery.min.js taboverride.min.js wcms-admin.min.css wcms-admin.min.js

root@shelterinfo:/var/www/html# ls plugins/summernote-editor/
LICENSE README.md css font fonts js preview.jpg summary summernote-editor.php version wcms-modules.json

root@shelterinfo:/var/www/html# ls plugins/summernote-editor/fonts
glyphicons-halflings-regular.woff2

root@shelterinfo:/var/www/html# ls plugins/summernote-editor/font
summernote.ttf summernote.woff summernote.woff2
root@shelterinfo:/var/www/html#

I also made the code changes.

What am I missing?

[nox]

root@shelterinfo:/var/www/html# ls plugins/summernote-editor/font
summernote.ttf summernote.woff summernote.woff2
root@shelterinfo:/var/www/html#

Hey JoeT, the path for summernote font is plugins/summernote-editor/css/font

[JoeT]

AH! Yes, I missed that minor detail, and it is WORKING now.

THANK YOU ever so much!

Joe

[nox]

Great! I'm glad it worked out.
css/font is easy to overlook, I had issues with it too

Updated JS and CSS for Summernote (missed CSS part) for future reference.