edward

Web editor as express middleware

Showing:

Popularity

Downloads/wk

269

GitHub Stars

28

Maintenance

Last Commit

2mos ago

Contributors

1

Package

Dependencies

10

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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).
  • Configurable options (json/edit.json could be overriden by ~/.edward.json)

Install

npm i edward -g

NPM_INFO

Command line parameters

Usage: edward [filename]

ParameterOperation
-h, --helpdisplay help and exit
-v, --versionoutput version information and exit

Hot keys

KeyOperation
Ctrl + ssave
Ctrl + ffind
Ctrl + hreplace
Ctrl + ggo to line
Ctrl + eevaluate (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({
    root: '/',              // default
    online: true,           // default
    diff: true,             // default
    zip: true,              // default
    dropbox: false,         // optional
    dropboxToken: 'token',  // optional
}));

app.listen(31_337);

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: '/', // optional
    prefixSocket: '/edward', //optional
    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"]', (editor) => {
    editor.setValue('Hello edward!');
});

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

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial