Skip to content

Latest commit

 

History

History
80 lines (55 loc) · 3.19 KB

README.md

File metadata and controls

80 lines (55 loc) · 3.19 KB
Raw

nw-me

NodeWebkit (nwjs) meets MediumEditor.

A very simple WYSIWYG editor for static HTML pages that can be saved locally and deployed to a static host such as S3. The inline HTML editing is provided by MediumEditor and the file management is handled in node.js by way of nwjs

DOM manipulation is handled by jquery in the browser and Cheerio in node.js.

Use Case

There seems to be a CMS out there for just about everything. However, I couldn't find one that would check these boxes:

  • Free to use and 100% Open Source
  • Editable directly on the page (full WYSIWYG)
  • Start with a set of static interlinked HTML files (built on any client side framework and with any content)
  • One-click staging/publish as completely static HTML files to be hosted on S3 or similar.

Install

npm i -S nw-me

Usage

Create the folder structure and index.js:

var nwme = require('nw-me');
nwme.init();

Drop your static HTML files and any associated scripts and assets into the "original" folder.

For any HTML element that you want to make editable, specify a data attribute as follows:

<h1 data-editable="header.title">Welcome to NW-ME</h1>

The variable name (e.g. header.title) should be unique (unless the content is intended to be repeated). This can be any element with text content (including tags such as <b>, <i> <a> etc). See MediumEditor Documentation for more information.

Running the Application

Run npm init and configure your package.json in accordance with the NWJS documentation.

Launch the NWJS application

Switch between "Edit Mode" and "View Mode" to edit content or navigate between HTML pages. Changes are saved when you toggle back to "View Mode".

Deployment

Deployment to static hosts such as S3 can be handled using a module with a ".deploy" method with the following signature:

this.deploy = function (folder, type, callback) { ...
  • folder: the file path of the 'deploy' folder that is to be copied to S3.
  • type: either 'staging' or 'production' depending on which option the user selected.
  • callback: the method to call when deployment is complete. If a "url" property is passed back, this URL will be run from shell (launched in the default browser).
callback({
    success: true,
    url: 'http://my-site.s3-website-us-east-1.amazonaws.com/' + type + '/'
});

And example S3 deployment module is included (commented out) in the "index.js" file.

Behind the scenes

  1. If the editing folder is empty, all files from original are copied to edit
  2. Medium-Editor scripts and nw-js scripts are copied to the editing folder
  3. Script tags are added to the head and body elements of all your .html files
  4. Any edits made in the tool are saved by modifying the HTML file directly (not from the Browser DOM which may have changed via script).
  5. For deployment as static files, all files from original are copied to deploy; html files from edit are copied to deploy with all temporary data tags and scripts removed.

License

MIT