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.
Stand-alone mode
Re: Stand-alone mode
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 with 6 script sources. Replace with:
For CSS look for with 3 link sources. Replace with:
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.
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) {
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>
Code: Select all
function loadSummerNoteCSS($args) {
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.
Last edited by nox on Tue May 07, 2024 5:19 pm, edited 4 times in total.
Re: Stand-alone mode
There is a Summernote Editor Lite plugin without Bootstrap made by c0mp0ser:
viewtopic.php?p=6628#p6628
viewtopic.php?p=6628#p6628
Re: Stand-alone mode
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?
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?
Re: Stand-alone mode
AH! Yes, I missed that minor detail, and it is WORKING now.
THANK YOU ever so much!
Joe
THANK YOU ever so much!
Joe
Re: Stand-alone mode
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.
css/font is easy to overlook, I had issues with it too
Updated JS and CSS for Summernote (missed CSS part) for future reference.