Web editor as express middleware
JavaScript CSS HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
bin
client
css
img
json
modules
server
vendor
.babelrc
.bowerrc
.editorconfig
.eslintrc
.gitignore
.jshintrc
.npmignore
.travis.yml
ChangeLog
LICENSE
README.md
bower.json
package.json
webpack.config.js

README.md

Edward License NPM version Dependency Status

Web editor used in Cloud Commander based on Ace.

Edward

Features

  • Syntax highlighting based on extension of file for over 110 languages.
  • Built-in emmet (for html files)
  • Drag n drop (drag file from desktop to editor).
  • Built-in jshint (with options in .jshintrc file, could be overriden by ~/.jshintrc)
  • Built-in beautifier (with options in json/beautify.json, could be overriden by ~/.beautify.json)
  • Configurable options (json/edit.json could be overriden by ~/.edward.json)

Install

npm i edward -g

NPM_INFO

Command line parameters

Usage: edward [filename]

Parameter Operation
-h, --help display help and exit
-v, --version output version information and exit

Hot keys

Key Operation
Ctrl + s save
Ctrl + f find
Ctrl + h replace
Ctrl + g go to line
Ctrl + b beautify js, css or html
Ctrl + m minify js, css or html
Ctrl + e evaluate (JavaScript only supported)

For more details see Ace keyboard shortcuts.

API

Edward could be used as middleware for express. For this purpuse API could be used.

Server

edward(options)

Middleware of edward. Options could be omitted.

const edward = require('edward');
const express = require('express');
const app = express();

app.use(edward({
    online  : true,  /* default */
    diff    : true,  /* default */
    zip     : true,  /* default */
}));

app.listen(31337);

edward.listen(socket)

Could be used with socket.io to handle editor events with.

const io = require('socket.io'),
const socket = io.listen(server);

edward.listen(socket, {
    root,
    prefix,
    auth: (accept, reject) => (username, password) => {
        accept();
    }
});

Client

Edward uses ace on client side, so API is similar. All you need is put minimal html, css, and js into your page.

Minimal html:

<div class="edit" data-name="js-edit"></div>
<script src="/edward/edward.js"></script>

Minimal css:

html, body, .edit {
    height: 100%;
    margin: 0;
}

Minimal js:

edward('[data-name="js-edit"]', function(editor) {
    editor.setValue('Hello edward!');
});

For more information you could always look around into assets and bin directory.

Related

License

MIT