Edward

Web editor used in Cloud Commander based on Ace.

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

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 + 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.

import {edward} from 'edward';
import express from '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.

import {Server} from 'socket.io';

const socket = new Server(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.

Related

• Dword - web editor based on Codemirror.
• Deepword - web editor based on Monaco.

License

MIT