Minimum Viable Editor

A micro content editing system for the express framework and any frontend.

This content editor uses a js object as data format, the same as most express templating engines.

Adds a nice looking medium-editor to every html-tag with a data-mve-html attribute.

To edit a page, add #editor (defined in config) to the url. And then click on the text you want to edit. Press ctrl + s or click the floppydisk in the lower right corner to save.

Editor Attributes

data-mve-text

Add a data-mve-text="[path to text in content json]" attribute and the tag becomes contenteditable.

data-mve-number

Add a data-mve-number="[path to text in content json]" attribute and the tag becomes contenteditable but only numbers and "." is allowed. The property in json will be a number instead of a string.

data-mve-html

Add a data-mve-html="[path to text in content json]" attribute and a medium editor is added to the tag.

data-mve-list

Add a data-mve-list="[path to list in content json]" attribute to be able to clone, delete and rearrenge items within the list. The path can be relative to a parent list, add ./ in the begining of the path.

<ul data-mve-list="content.items">
  {{#each content.items}}
    <li data-mve-html="./">{{name}}</li>
  {{/each}}
</ul>

The data path for the items become content.items.0, content.items.1.

data-mve-with

Changes the scope for the data-mve-* tags below. Makes refactoring and texts in partials easier. And might save some bytes in the html.

<section data-mve-with="article">
  <h2 data-mve-text="./header">{{article.header}}</h2>
</section>

data-mve-image (Beta)

Adds an imagefile upload for images.

<img src={{image}} data-mve-image="{{image}} />

Click on the image to upload a new one.

Installation

Install package

npm install minimum-viable-editor --save

Setup

In your node app:

const mve = require('minimum-viable-editor');

router.use(mve.setup({
  dataPath : './data';              // folder for content json and uploaded files.
  users : ['user:123']              //users to be able to edit the content in the form username:password
}));

router.get('/content.json', mve.addContent(), (req, res, next) => res.json(req.content));

See setup parameters for more config parameters.

Add a json file in the dataPath folder with your content data. And add the folder assets upload.

Setup parameters

Parameters to pass into mve.setup.

| Parameter | Default | Description | |---------------|------------------|-------------------------------------------------------------------------------| | auth | mve.basicAuth() | Authentification middleware for content routes. | | contentPath | [dataPath] | Folder on server for storage of content. | | dataPath | ./data | Folder on server for content and file storage. | | editorUrl | /mve | Route for mve. Used for communication between server and client | | filesPath | [dataPath]/files | Folder for file uploads. | | hash | editor | Hash to att to url in browser to show the editor. eg. /page#editor | | mediumOptions | {} | Options for the Medium Editor | | splitContent | false | If the content should be splited into multiple files. | | storage | file | Use file storage, more types are in the roadmap as cloud or database storage. | | users | [] | Array of allowed users for content reading and writing. ["user:pwd",...] |

Methods

Public method in the package.

| Method | Parameters | Description | |-----------------|-------------------|------------------------------------------------------------------------| | mve.addContent | lang, addMetaData | Middleware that adds content to req.content | | mve.setup | see setup | Initializes the editor | | mve.getContent | lang | fetches the content from storage, returns a promise. | | mve.getMetaData | lang | fetches metadata about the javascript assets to load. | | mve.basicAuth | | Middleware for basicAuth, used by the content router. Uses setup.users | | mve.treeEditor | content | returns html for a simple data object editor |

HTML

And in the html add (in handlebars) :

  <script type="text/javascript" src="{{_mve.loader}}"></script>

Where the handlebars template data is req.content.

Add an extra data-mve attribute to every tag you want to edit. Use the lodash set/get format to define the data property.

(here with handlebars as templating engine)

<div>
  <h3 data-mve-text="about.header">{{"about.header}}</h3>
  <img data-mve-image="about.image" src="{{about.image.src}}" />
  <div data-mve-list="{{about.sections}}"
    {{#each about.sections }}
      <div data-mve-html="./text">
        {{{text}}}
      </div>
    {{/each}}
  </div>
</div>

Tree editor

MVE also includes a simple json tree editor.

router.get('/content', mve.basicAuth, mve.addContent(), (req, res, next) => {
  res.render('content', {
    html : mve.treeEditor(req.content),
    _mve : req.content._mve
  });
});

Internationalization

Add a lang parameter to addContent to retrive another language.

router.get('/content', mve.basicAuth, mve.addContent('sv_se'), (req, res, next) => {
  res.render('content', {
    html : mve.treeEditor(req.content),
    _mve : req.content._mve
  });
});

router.get('/content.json', mve.addContent('sv_se', false), (req, res, next) => {
  res.json(req.content);
});     

A sv_se.json need to be added to the data folder. The _mve property in content is updated for the new language.

Security

The editor doesn't provide any kind of security except the basic auth. To change authentification middleware pass a auth middleware to setup as a auth-parameter. Or Implement something more complicated with the advanced setup.

Editing of invisible elements

Since its only possible to edit visible elements you have to create a different page and add these texts as normal elements. To fetch the editor directly instead of adding #editor, use the index.js.

<script type="text/javascript" src="{{_mve.index}}"></script>

Syncronize content

It could be discussed if the data folder with content should be commited and deployed together with the source. It simplifies deployment of new features a lot. To avoid to write over changed content during deployment a sync script is provided. Add to scripts in package.json

"sync-content" : "mve-sync https://[remote server]/content.json ./data/sv_se.json"

And run npm run sync-content before starting on new content and before release. The local content and remote content will be deep merged with the remote content as master.

Tests

soon :(