Qword

Web editor based on CodeMirror. Fork of edward.

Features

• Syntax highlighting based on extension of file for over 90 languages.
• Built-in emmet (for html files)
• Drag n drop (drag file from desktop to editor).
• Configurable options (json/edit.json could be overridden by ~/.qword.json)

Install

npm i qword -g

Command line parameters

Usage: qword [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)

API

qword could be used as middleware for express. For this purpose API could be used.

Server

qword(options)

Middleware of qword. Options could be omitted.

import {qword} from 'qword';
import express from 'express';

const app = express();

app.use(qword({
    root: '/', // default
    online: true, // default
    diff: true, // default
    zip: true, // default
    dropbox: false, // optional
    dropboxToken: 'token', //  optional
}));

app.listen(31_337);

qword.listen(socket)

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

import {Server} from 'socket.io';

const socket = new Server(server);

qword.listen(socket, {
    // optional
    prefixSocket: '/qword',
    // optional
    auth: (accept, reject) => (username, password) => {
        accept();
    },
});

Client

qword uses codemirror 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="/qword/qword.js"></script>

Minimal css:

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

Minimal js:

qword('[data-name="js-edit"]', (editor) => {
    editor.setValue('hello qword');
    console.log('qword is ready');
});

Client API

qword(selector, callback)

• selector: string
• callback: EditorCallback

Initialize new instance

editor.setValue(value)

• value: string

Set value to editor.

editor.getValue()

• returns: string

Get value from editor.

Types

interface Editor {
    setValue: (value: string) => void;
    getValue: () => string;
}

type EditorCallback = (editor: Editor) => void;
type qword = (selector: string, callback: EditorCallback) => void;

For more information you could always look around client/qword.js directory.

Related

• Edward - web editor based on Ace.
• Deepword - web editor based on Monaco.

License

MIT